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

Question

我正在尝试在 Github 的这个页面上使用 react-select 组件，一切正常，创建了一个多选组件作为下面的示例之一，它似乎工作正常。我的问题是，如何将处于相同组件状态的此控件选定值(即数组)传递到我在其中使用此控件的父状态值组件？几天来一直在寻找“React 方式”解决方案，但运气不佳。

react-select Multiselect control

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

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'
  />
}