为什么我必须在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()} />

然后您调用该函数并将返回值分配给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
的简写方式

感谢Zequez提供有用的评论。