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

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

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

---

但是，回调中的

事件

未定义。如何将事件对象传递给该回调？有可能吗

您正在使用一个新变量来覆盖

事件

对象，该变量也称为

事件

——箭头函数括号中的内容是它的参数，而不是传递的内容。您的代码应该是这样的：

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

而事实上，你之前做过：

function callback(event) { // This is a different event parameter!
    console.log(event.target.id);
}

processOnBlur(event) {
    this.setState({
        input: event.target.id
    }, callback); // See? You're not actually passing event in
}

---

将函数回调传递给

setState（）

将在状态更改发生后执行该函数，这意味着即使正确传入，事件目标在回调内部也将为null（状态更改发生，组件重新呈现，事件发生，不再有目标）.

有几种方法可以解决这个问题，首先，您只是将输入的状态设置为等于

event.target.id

，这意味着您可以通过state在回调函数中访问它：

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)} />  

---

EDIT:我忘记的另一个方法（在这种情况下可能是最简单的方法）是对传递给事件处理程序的事件调用

event.persist（）

：

processOnBlur(event) {
  event.persit();

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

---

这将防止React擦除事件引用，以便您可以保留对它的访问。

请尝试根本不传递'event'参数

（）=>{…console.log…

，这是箭头函数，它可能会拾取

processOnBlur

上传递的

事件，尽管我不确定。
processOnBlur(event) {
  event.persit();

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