javascript - 在onChange事件期间，更新状态并从子组件中同时调用父onChange处理程序

当子组件的select元素更改时，我试图做两件事-


更新子状态（用于显示更多字段以及其他特定于子的决定等），
调用传递给道具的父处理程序。


只有第一个正在工作，我如何还要添加第二个？什么是正确的方法？

虚拟代码：

class Child {
    render(){
        return(
            <div>
            //....
            <select
                id={this.state.searchId}
                value={this.state.searchId}
                onChange={
                    //1. event => this.setState({searchId : event.target.value})
                    //2. call parent props changeHandler
                }>
                {options}
            </select>
            //....
            </div>
        )
    }
}

class Parent {
    onSearchPrefChange(e) {
        this.setState({
            searchId : e.target.value
        })
    }

    render(){
        <Child onChange={this.onSearchPrefChange} />
    }
}

我试过了：

onChange={e => {
    this.setState({searchId : e.target.value});
    this.props.onSearchPrefChange;
}}>

不调用父处理程序，它也用于更改具有相同已更改元素的值/ id的父状态。

最佳答案

您可以在子组件中定义onChange事件处理程序，在该子组件中设置子组件的集合，并从该函数中调用props中从父代传递的回调。这是示例代码：

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.onSelectChange = this.onSelectChange.bind(this);
  }
  onSelectChange(e) {
    const newValue = e.target.value;
    this.props.onChange(newValue );
    // set child state here
    this.setState({searchId : newValue })
  }
  render() {
    return (
      <div>
        <select onChange={this.onSelectChange}>
          <option value="1">1</option>
          <option value="2">2</option>
        </select>
      </div>
    )
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.someHandler = this.someHandler.bind(this);
  }
  someHandler(childValue) {
    console.log(childValue);
    this.setState({ value: childValue })
  }
  render() {
    return <Child onChange={this.someHandler} />
  }
}

这是codesandbox上的工作示例。