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

Question

我正在尝试在 Github 的此页面上使用 react-select 组件，一切正常，创建了一个 multiselect 组件作为下面的示例之一，并且它似乎工作正常。我的问题是，如何将此控件的 selected 值（即数组）以相同的组件状态传递给我在其中使用此控件的父状态值组件？已经寻找 "React way" 解决方案好几天了，但没有成功。

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

您需要在父组件中创建一个接受所选值的方法，然后在子组件中将其作为 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>
            );
      }
}

Answer 2

如果您使用示例中的 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'
  />
}

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

Pass child state value to Parent state array

javascript

state

reactjs

react-select