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

我试图在Github的这个页面上使用react-select组件，一切正常，创建了一个multiselect组件，如下面的示例所示，它似乎工作正常。我的问题是，如何将该控件的选定值（即数组）以相同的组件状态传递给使用该控件的父状态值组件？几天来一直在寻找“反应方式”解决方案，但运气不佳

这是我使用控件的父组件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>
            );
      }
}

import'react-select/dist/react-select.css'；
从“/Multiselect”导入Multiselect；
从“React”导入React；
导出默认类Formcontacto扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
选择childvalue:[]，
}
this.handlechildvalueSelect=this.handlechildvalueSelect.bind（this）；
}
HandleChildValue选择（e）{
this.setState（{selectchildValue:e.target.value}）；
}
render（）{
返回(
姓名：
勘误表。。。
);
}
}

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

家长：

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>
            );
      }
}

从“React”导入React；
导出默认类Formcontacto扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
所选值：[]
}
}
不动产（价值）{
this.setState（{selectedValues:values}）；
}
render（）{
返回；
}
}
导入“react-select/dist/react-select.css”；
从“/Multiselect”导入Multiselect；
从“React”导入React；
导出默认类Formcontacto扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
选择childvalue:[]，
}
this.handlechildvalueSelect=this.handlechildvalueSelect.bind（this）；
}
HandleChildValue选择（e）{
this.setState（{selectchildValue:e.target.value}）；
this.props.updateState（即target.value）；
}
render（）{
返回(
姓名：
勘误表。。。
);
}
}

如果使用示例中的

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;
}

proptype：{
标签：PropTypes.string，
值：PropTypes.arrayOf（PropTypes.string），
onSelectChange:PropTypes.func.isRequired，
},
getDefaultProps:function（）{
返回{
值：[]，
};
},
getInitialState（）{
返回{
removeSelected：没错，
残疾人士:错,，
疯狂：错，
stayOpen:错，
value:[]，您可以使用
props
，如
this.props.parentFunction（e.target.value）
…在您的
手册中ChildValue选择事件感谢您的建议，但这是基本的我所做的，我认为props是正确的方法谢谢，我需要实现这一点，但这是正确的答案，谢谢。
handlechildvalueSelect(value) {
    this.setState({ selectchildValue: value });
}

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