javascript - 在 React 中如何将值传递给状态更改回调？

Question

我在 setState 之后有以下匿名函数回调:

  processOnBlur(event) {
      this.setState({
        input: event.target.id
      }, (event) => {
        console.log(event.target.id);
      });
  }

但是，回调中的event 是未定义的。如何将事件对象传递给该回调？有可能吗？

Answer 1

将函数回调传递给 setState() 将在状态更改发生后执行该函数，在这种情况下这意味着即使正确传递，您的事件目标在回调(状态发生变化，你的组件重新渲染，React 删除事件，你不再有目标)。

有几种方法可以解决这个问题，首先，您只是将输入状态设置为等于 event.target.id，这意味着您可以在回调中访问它通过状态运行:

processOnBlur(event) {
  this.setState({
    input: event.target.id
  }, () => {
    console.log(this.state.input);
  });
}

另一种选择是在输入上设置一个 ref，这是一个 React 功能，可以为您提供对该组件的引用，您可以在类函数中自由使用该组件。

根据您的输入:

<input id="username" 
       type="text" 
       ref="myInput"
       onBlur={(e) => this.processOnBlur(e)} />  

然后您可以通过 this.refs.myInput 在您的事件处理程序中访问它，如下所示:

processOnBlur(event) {
  this.setState({
    input: event.target.id
  }, () => {
    console.log(this.refs.myInput.id);
  });
}

// You could also use it to set your input state if you really wanted to, 
// though event.target is probably more appropriate.
//
// input: this.refs.myInput.id

---

编辑: 我忘记了一个额外的方法(在这种情况下可能是最简单的方法)是对传递给您的事件的事件调用 event.persist()处理程序:

processOnBlur(event) {
  event.persit();

  this.setState({
    input: event.target.id
  }, () => {
    console.log(event.target.id);
  });
}

这可以防止 React 删除事件引用，因此您可以保留对它的访问权限。