时间戳

首页 > 解决方案 > React js 从容器中获取组件状态的值

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

问题描述

我有一个名为<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 />它在 a 中map，因此如果我尝试在外部处理更改，它们都将采用相同的状态。

标签： reactjsreact-select

解决方案

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

父组件.js：

class ParentComponent extends React.Component {

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

    handleSelect(selectedValue) {
       //handle selected value
   }


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

多选组件.js

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

推荐阅读