Question

我正在尝试在子组件的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的父状态。

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上的一个工作示例。

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

1 个答案: