Question

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

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

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

Answer 1

将函数回调传递给setState()将在状态发生更改后执行该函数，在这种情况下意味着即使正确传入，您的事件目标在回调内也将为null（状态更改）发生了，你的组件重新渲染，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
}

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

2 个答案: