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

【问题标题】：Why do I have to wrap the functions of my onClick attributes in anonymous functions in React?为什么我必须将我的 onClick 属性的函数包装在 React 的匿名函数中？
【发布时间】：2016-07-05 13:19:03
【问题描述】：

抱歉标题令人困惑；如果我的某个组件上有 onClick 属性，例如以下

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

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

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

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

【问题讨论】：

你可以做onClick={ _this.doSomething }
@Rajesh 并非总是如此。你很有可能也需要this.doSomething.bind(this)。
@BenFortune 是的，你是对的。我们可能不得不这样做。
我也觉得这很奇怪，您必须将“_this”定义为“this”。可能是因为在 function(){} 中，“this”指向新的上下文是另一个上下文。但是，当您将“_this”定义为 function() 外部的“this”时，您可以使用“_this”在 function() 外部保留上下文。
@BenFortune 一个问题，如果我在做_this.doSomething，会不会将this 关联到_this？

标签： javascript reactjs anonymous-function jsx

【解决方案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 的有用评论。

【讨论】：

如果你正在使用 react createClass 它是。如果您使用的是 ES6 类，则不是。但是，如果您使用 ES7，您可以使用 classMethod = () => {} 而不是 function classMethod () {} 将类方法定义为属性，并且它会自动绑定，或者您可以使用 ::this.doSomething 这是.bind(this) 的简写。跨度>
我不知道双冒号语法。谢谢！
感谢@Zequez，我更新了我的答案，以包含您评论中的详细信息。
如果我想在点击时将参数传递给函数怎么办？如果我想说 onClick={this.doSomething(value)}。我必须包含括号才能传入一个值，不是吗？
@EllDoubleYew 是的，在这种情况下，您需要使用匿名函数（正如您在问题中所做的那样），注意将 this 保持在范围内。