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

Question

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

1. 更新子状态(用于显示更多字段以及其他特定于子项的决策等)，
2. 调用传入 props 的父处理程序。

只有第一个可以工作，如何添加第二个？正确的方法是什么？

虚拟代码:

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 的父处理程序的状态。

Answer 1

您可以在子组件中定义 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 上的一个工作示例.