react-select 使用道具处理 onChange

Question

我在子组件中使用 react-select，但希望将 Select 值存储在父组件的状态中。

感谢我必须将 onChange 存储在 state 中，然后将其传递给 Select 值，但我想将此临时 onChange 状态保留在子组件而不是父组件中。

所以问题是我如何从孩子的 onChange 状态设置父状态（进入道具）。

父组件

campaignName (campaign){
  //will setState here
   console.log(campaign)
  }
...
<FormGroup>
  <Campaign
    campaignName={this.campaignName.bind(this)}
    campaignOptions={code in here that sets option}
   />
</FormGroup>

子组件

updateValue (newValue) {
    this.setState({
        selectValue: newValue,
  // how do I set the parent state from this 
    });

<Select
   onChange={this.updateValue}
   value={this.props.campaignName}
   options={this.props.campaignOptions}
/>

Answer 1

将处理 onChange 的函数直接从父级传递给子级：

父组件

handleSelect(e) {
   this.setState({
       selectValue: e.target.value,
   });
}

render() {
    <ChildComponent selectOnChange={this.handleSelect} />
}

子组件

<Select
   onChange={this.props.selectOnChange}
   value={this.props.campaignName}
/>

或者（如果你想让方法留在孩子身上）

updateValue(e) {
   this.props.selectOnChange(e); //call the passed props here
}

<Select
   onChange={this.updateValue}
   value={this.props.campaignName}
/>