Question

我了解您可能会觉得这是一个多余的问题，但是请听我说。

我正在使用React类组件，并且我刚刚了解到我们需要在组件的构造函数中绑定事件处理程序函数，以便访问事件处理程序内部的this.setState()。现在，据我对JavaScript类的了解，this可以被类内的任何方法访问。

为了演示我在说什么，下面是代码：

class Parent {
  setState() {
    console.log("Set State is called");
  }
}

class Child extends Parent {
  eventHandler() {
    this.setState();
  }

  render() {
    console.log("Render method called");
    console.log("assume an event happened and event handler is called");
    this.eventHandler();
  }
}

new Child().render()

以上代码的输出为：

Render method called
assume an event happened and event handler is called
Set State is called

将上面的代码与React的工作方式进行对比（即假设setState是类React.Component中定义的方法），为什么在事件内部调用this.setState()时react会引发错误处理程序？

Answer 1

我错过的关键是，在类内部定义的方法在重新分配时会丢失其上下文。

所以，当我们这样做时，

<SomeComponent onClick={eventHandler} />

eventHandler被重新分配给其他变量，并由react在内部调用。由于此重新分配，eventHandler将失去其上下文，并且当在内部被React调用时，它将没有this。

要明确地将this绑定到eventHandler，以便即使重新分配后它也不会丢失其上下文，我们要做：

this.eventHandler = this.eventHandler.bind(this)

请参阅this文章以获取详细说明。

为什么我们需要在react

1 个答案: