Question

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

我很欣赏我必须将onChange存储在状态中然后将其传递给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}
/>

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

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

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

react-select handle onChange with props

1 个答案: