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

Question

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

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

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

Answer 1

将函数回调传递给setState()将在状态更改发生后执行该函数，在这种情况下，这意味着即使正确传递，您的事件目标在回调内部也将为null（状态更改发生了，并且组件重新-rendered，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抹掉事件引用，因此您可以保留对其的访问。

Answer 2

您正在用一个也称为event的新变量覆盖event对象-箭头函数括号中的内容是其参数，而不是您要传递的参数。这是代码应如下所示：

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
}