为什么我们需要在 react 中绑定一个事件处理程序?

我知道你可能觉得这是一个多余的问题,但听我说完。

我正在使用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() 是在事件处理程序中调用的?

解决方案:

我漏掉的关键点是,在类中定义的方法在被重新分配时将失去其上下文。

所以当我们这样做的时候。

<SomeComponent onClick={eventHandler} />

eventHandler 被重新分配给其他变量,并被 react 内部调用。因为这个重赋,所以 eventHandler 将失去它的上下文,当被内部的react调用时,它将没有 this.

要明确绑定 thiseventHandler 为了使它在重新分配后也不会失去其上下文,我们是这样做的。

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

请参考 这个 文章进行深入解读。

本文来自投稿,不代表运维实战侠立场,如若转载,请注明出处:https://www.shizhanxia.com/874.html

(0)
上一篇 2022年6月29日 下午4:01
下一篇 2022年6月29日 下午4:01

相关推荐

发表评论

登录后才能评论