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

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

javascript reactjs

Javascript 为什么我必须将onClick属性的函数包装在React中的匿名函数中？,javascript,reactjs,anonymous-function,jsx,Javascript,Reactjs,Anonymous Function,Jsx,对不起，标题很混乱；如果我的一个组件上有一个onClick属性，比如 <Component onClick={this.doSomething()} /> 根据doSomething（）函数实际调用的内容，我经常会遇到奇怪的错误。如果doSomething（）正在更改状态，我会收到各种各样的渲染错误。另一方面，如果我这样做 var _this = this; <Component onClick{ function(){ _this.doSomethin

对不起，标题很混乱；如果我的一个组件上有一个onClick属性，比如

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

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

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

var\u this=this；

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

如果您这样做：

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

i、 e.删除

（）

，以便将函数分配给属性，而不是执行函数的结果

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

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

您也可以使用

onClick={this.doSomething.bind（this）}

，但这意味着每次重新呈现组件时都会创建一个新函数

此

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

使用
```
类
```
关键字（ES6），
```
不会自动绑定此
```
使用
```
React.createClass
```
，
```
将绑定此
```

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

使用
```
doSomething=（）=>{/…
```
而不是
```
函数
```
关键字
使用
```
onClick={：：this.doSomething}
```
，一种绑定
```
this
```

感谢他们的有用评论。

如果您这样做：

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

i、 e.删除

（）

，以便将函数分配给属性，而不是执行函数的结果

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

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

您也可以使用

onClick={this.doSomething.bind（this）}

，但这意味着每次重新呈现组件时都会创建一个新函数

此

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

使用
```
类
```
关键字（ES6），
```
不会自动绑定此
```
使用
```
React.createClass
```
，
```
将绑定此
```

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

使用
```
doSomething=（）=>{/…
```
而不是
```
函数
```
关键字
使用
```
onClick={：：this.doSomething}
```
，一种绑定
```
this
```

感谢他们的有用评论。

你可以做

onClick={{u this.doSomething}

@Rajesh并不总是这样。你很有可能也需要

this.doSomething.bind（this）

。@BenFortune是的，你是对的。我们可能不得不这么做。我也觉得很奇怪，你必须将“\u this”定义为“this”。可能是因为在函数（）{}，这是另一个上下文，“this”指向新上下文。但是，当您在函数（）外部将“_this”定义为“this”时，可以使用“_this”在函数（）外部保留上下文@BenFortune问一个问题，如果我在做

\u this.doSomething

，你会不会把

这个和\u this
联系起来？你可以做onClick={{u this.doSomething}
@Rajesh不总是这样。你很可能需要这个.doshing.bind（这个）
也是。@BenFortune是的，你是对的。我们可能不得不这么做。我也觉得很奇怪，你必须将“\u this”定义为“this”。可能是因为在函数（）{}中，“this”指向新上下文的是另一个上下文。然而，当你在函数（）之外将“\u this”定义为“this”时，则可以使用“\u this”在函数（）外部保留上下文@BenFortune一个问题，如果我在做\u this.doSomething
，将不会将this
关联到\u this
？如果您使用的是reactcreateClass
，它是。如果您使用的是ES6类，它不是。但是，如果您使用的是ES7，您可以使用classMethod=（）=>{将类方法定义为属性
而不是函数类方法（）{}
，它将被自动绑定，或者您可以执行：：this.doSomething
，这是绑定（this）的缩写
。我不知道双冒号语法。谢谢！谢谢@Zequez，我更新了我的答案以包含您评论中的详细信息。如果我想在单击时将参数传递到函数中呢？如果我想说onClick={this.doSomething（value）}，该怎么办。我必须包含括号才能传递值，不是吗？@EllDoubleYew是的，在这种情况下，您需要使用匿名函数（正如您在问题中所做的那样），注意将这个
保留在范围内。如果您使用的是reactcreateClass
，它就是。如果您使用的是ES6类，它不是。但是，如果您使用的是ES7，您可以使用classMethod=（）=>{}
而不是function classMethod（）{}将类方法定义为属性
它将被自动绑定，或者您可以执行：：this.doSomething
，这是.bind（this）的缩写
。我不知道双冒号语法。谢谢！谢谢@Zequez，我更新了我的答案以包含您评论中的详细信息。如果我想在单击时将参数传递到函数中呢？如果我想说onClick={this.doSomething（value）}，该怎么办。我必须包含括号才能传递值，不是吗？@EllDoubleYew是的，在这种情况下，您需要使用匿名函数（正如您在问题中所做的那样），注意将此
保留在范围内。