javascript - 当发生在 child 中的事件时，我需要更改存储在parent 中的状态

Question

我是 React 初学者。
关于发生在 child 身上的事件<MyInput> ，我需要更改存储在父项 <audienceContainer> 中的状态。下面是我的代码片段。

具有以下组件层次结构:

-audienceContainer
  -audienceForm
   -MyInput

在 AudienceContainer 中，即父级:

handlValidationErrors(obj, changedItem, value) {
        //some code
    }
   render() {

        return (
  <AudienceForm 
      onErrorAppear = {this.handlValidationErrors.bind(this, changedItem, value)} 
   />
)}

在 AudienceForm 中，它是子项:

...
onErrorAppear(obj, changedItem, value)
    {
        this.props.onErrorAppear(obj, changedItem, value);
    }

...
 render () {
        return (
 <MyInput 
    onErrorAppear = {this.onErrorAppear.bind(this, changedItem, value)}
  />
}

在子项 MyInput 的子项中:

 ...
isValid(input) {
       ...
      this.props.onErrorAppear(input, input.props.errorField, 'Field is not valid'); //!!!!!
     ...}   

所以我在audienceContainer中收到错误“changedItem未定义”。也许有人可以帮忙。

Answer 1

您需要为changedItem提供一些值。值(value)也是如此。

<AudienceForm 
   onErrorAppear = {this.handleValidationErrors.bind(this, changedItem, value)} 
/>

如果这是子组件在方法调用时将执行的操作，则不要绑定(bind)。

<AudienceForm 
   onErrorAppear = {this.handleValidationErrors.bind(this)} 
/>