React js 从容器中获取组件状态的值

Question

我有一个名为 <MultiSelect /> 的组件。在组件中包含它自己的状态。我需要从它获取价值到父容器。我该如何执行此操作？

多选：

  state = {
    multi: null,
  }

  handleChange = (name) => (value) => {
    this.setState({
      [name]: value,
    })
  }

return (
  <div className={classes.root}>
    <NoSsr>
      <Select
        classes={classes}
        styles={selectStyles}
        textFieldProps={{
          label: 'Label',
          InputLabelProps: {
            shrink: true,
          },
        }}
        options={diagnosticCodes}
        components={components}
        value={this.state.multi}
        onChange={this.handleChange('multi')}
        placeholder="Select multiple countries"
        isMulti
      />
    </NoSsr>
  </div>
)

我想要父容器中 {this.state.multi} 的值。我无法从外部定义状态和处理 onChange 事件，因为 <MultiSelect /> 在 map 中，所以如果我尝试在外部处理更改，它们都采用相同的状态。

Answer 1

您可以将父组件上存在的方法传递给 MultiSelect 组件

ParentComponent.js:

class ParentComponent extends React.Component {

    constructor() {
        this.handleSelect = this.handleSelect.bind(this);
    }

    handleSelect(selectedValue) {
       //handle selected value
   }


   render() {
      return <MultiSelect  handleSelect={this.handleSelect} />
   }
}

MultiSelectComponent.js

handleChange = (name) => (value) => {
   this.setState({
     [name]: value,
   }, () => this.props.handleSelect(this.state.multi)); //Call the method in the callback of setState
}

React js 从容器中获取组件状态的值

React js get value of component's state from container

reactjs

react-select