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

Question

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

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

Answer 2

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

家长：

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