javascript - 在 React 中设置状态的正确方法是什么

Question

老实说，这是我使用 ReactJS 的第一天。我正在学习一些很小的事情，比如状态。我为切换按钮创建了一个小程序。它只会显示“Hello world!”或者当按钮切换时不显示任何内容。有件事我不明白。当我使用以下语法时，我的代码出现错误:

  toggleHandler() {
    const currentStatus=this.state.display;
    this.setState({
      display: !currentStatus
    })
  }

this.state is undefined

但是如果我将语法更改为粗箭头函数，相同的代码可以完美运行:

  toggleHandler=()=> {
    const currentStatus=this.state.display;
    this.setState({
      display: !currentStatus
    })
  }

我不会浪费你的时间。我创建了一个stackblitz 。互联网上的专家表示，任何对 this.setState() 的调用都是异步的。因此，我尝试使用回调函数和 IIFE，但让自己更加困惑和过于复杂。请纠正我。抱歉，这是一个非常幼稚的问题。

Answer 1

有几种方法。

一是在构造函数中添加。 ES6 React.Component 不会自动将方法绑定(bind)到自身。您需要在构造函数中自己绑定(bind)它们。像这样

this.toggleHandler = this.toggleHandler.bind(this);

另一个是箭头函数toggleHandler = (event) => {...}。

然后是onClick={this.toggleHandler.bind(this)}

reference