Реагировать js получить значение состояния компонента из контейнера - PullRequest
Новая
       8

Реагировать js получить значение состояния компонента из контейнера

0 голосов
/ 11 октября 2018

У меня есть компонент с именем <MultiSelect />.В компоненте содержится собственное состояние.Мне нужно получить значение из него в родительский контейнер.Как я могу это сделать?

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, поэтому, если я пытаюсь обработать изменение снаружи, все они принимают одно и то же состояние.

1 Ответ

0 голосов
/ 11 октября 2018

Вы можете передать метод, присутствующий в родительском Компоненте, в 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
}
...