Question

我试图在Github的此页面上使用react-select组件，一切正常，创建了一个multiselect组件作为下面的示例之一，它似乎可以正常工作。我的问题是，如何将控件的选定值（即处于相同组件状态的数组）传递给我在其中使用此控件的父状态值组件？一直没有运气的情况下，一直在寻找“反应方式”的解决方案。

react-select Multiselect control

这是我使用控件的父组件。

import 'react-select/dist/react-select.css';
import Multiselect from './Multiselect';
import React from 'react';

export default class Formcontacto extends React.Component {
  constructor(props) {
   super(props);
    this.state = {
      selectchildValue: [],      
    }

    this.handlechildvalueSelect = this.handlechildvalueSelect.bind(this);       

    }

    handlechildvalueSelect(e) {
        this.setState({ selectchildValue: e.target.value });
    }

    render() {
            return (
            <div className='cSelectclass'>
              <form method="post" action="/send" className="cForm" onSubmit={this.handleFormSubmit}>
             <label>
                    Name:
                    <input type="text" name="name" />
              </label>
            <Multiselect value={this.handlechildvalueSelect} className='cSelects'/>
            <input
              type="submit"
              className="cSubmit"
              formvalues={this.state}
              email="myemail@gmail.com"
              onClick={this.handleFormSubmit}
              value="Submit"/>
            <button
              className="cButton"
              onClick={this.handleClearForm}>Errase form...</button>
            </form>
              </div>
            );
      }
}

Answer 1

如果您在示例中使用Multiselect，则应将其重写一下以接受某些onChangeSelect函数

propTypes: {
    label: PropTypes.string,
    value: PropTypes.arrayOf(PropTypes.string),
    onSelectChange: PropTypes.func.isRequired,
},
getDefaultProps: function() {
  return {
    value: [],
  };
},
getInitialState () {
    return {
        removeSelected: true,
        disabled: false,
        crazy: false,
        stayOpen: false,
        value: [], <-- remove this, cause it will be passed by parent component in props
        rtl: false,
    };
},
handleSelectChange (value) {
    console.log('You\'ve selected:', value);
    this.props.onSelectChange(value);
},
...
render () {
   const { value } = this.props;
}

然后在您的父组件中

handlechildvalueSelect(value) {
    this.setState({ selectchildValue: value });
}

render() {
  <Multiselect
    onSelectChange={this.handlechildvalueSelect}
    value={this.state.selectchildValue}
    className='cSelects'
  />
}

Answer 2

您需要在父组件中创建一个接受选定值的方法，然后在子代中将其作为prop进行调用：

父母：

import React from 'react';

export default class Formcontacto extends React.Component {
  constructor(props) {
   super(props);
      this.state = {
        selectedValues: []      
      }
    }

    updateState(values) {
        this.setState({ selectedValues: values });
    }

    render() {
            return <Formcontacto updateState={this.updateState} />;
      }
}


import 'react-select/dist/react-select.css';
import Multiselect from './Multiselect';
import React from 'react';

export default class Formcontacto extends React.Component {
  constructor(props) {
   super(props);
    this.state = {
      selectchildValue: [],      
    }

    this.handlechildvalueSelect = this.handlechildvalueSelect.bind(this);       

    }

    handlechildvalueSelect(e) {
        this.setState({ selectchildValue: e.target.value });
        this.props.updateState(e.target.value);
    }

    render() {
            return (
            <div className='cSelectclass'>
              <form method="post" action="/send" className="cForm" onSubmit={this.handleFormSubmit}>
             <label>
                    Name:
                    <input type="text" name="name" />
              </label>
            <Multiselect value={this.handlechildvalueSelect} className='cSelects'/>
            <input
              type="submit"
              className="cSubmit"
              formvalues={this.state}
              email="myemail@gmail.com"
              onClick={this.handleFormSubmit}
              value="Submit"/>
            <button
              className="cButton"
              onClick={this.handleClearForm}>Errase form...</button>
            </form>
              </div>
            );
      }
}

将子状态值传递给父状态数组

2 个答案: