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

Question

很抱歉标题令人困惑;如果我的某个组件上有 onClick 属性，如下所示

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

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

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

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

Answer 1

如果这样做：

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

然后调用函数并将返回值分配给 onClick 属性。如果this.doSomething()在渲染过程中修改组件状态，则会导致问题。

您应该能够使用：

<Component onClick={this.doSomething} /> 

即删除()，因此函数被分配给属性，而不是执行函数的结果。

在组件类的构造函数中，应包含以下行：

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

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

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

• 使用 class 关键字 （ES6），this不会自动绑定
• 使用 React.createClass ，绑定this

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

• 使用 doSomething = () => { //... 而不是 function 关键字
• 使用 onClick={::this.doSomething} ，一种绑定this的速记方法

感谢泽克斯的有用评论。