为什么我必须在 React 的匿名函数中包装我的 onClick 属性的函数？

Question

抱歉标题混乱；如果我的组件之一具有 onClick 属性，例如以下

<Component onClick={this.doSomething()} />

根据 doSomething() 函数实际调用的内容，我经常会遇到奇怪的错误。如果 doSomething() 正在改变状态，特别是我会收到各种渲染错误。另一方面，如果我这样做

var _this = this;
<Component onClick{
   function(){
      _this.doSomething()
   }
} />

所有错误都消失了，一切都按我的预期进行。通过将我的 onClick 属性包装在使它起作用的匿名函数中，我到底在做什么？有没有更好的方法来做我想做的事情？

Answer 1

如果你这样做：

<Component onClick={this.doSomething()} />

然后您将调用函数并将return 值分配给onClick 属性。如果 this.doSomething() 在渲染期间修改组件状态，那么这将导致问题。

您应该可以使用：

<Component onClick={this.doSomething} />

即去掉()，这样函数赋值给属性，而不是函数执行的结果。

在组件 class 的构造函数中，您应该包括以下行：

this.doSomething = this.doSomething.bind(this);

您也可以使用 onClick={this.doSomething.bind(this)}，但这意味着每次重新渲染组件时都会创建一个新函数。

组件 class 中 this 的绑定行为因组件的创建方式而异：

使用 ES7，您还有更多选择：

感谢 Zequez 的有用评论。

Why do I have to wrap the functions of my onClick attributes in anonymous functions in React?