为什么我必须在 React 事件处理程序中放置一个箭头函数而不仅仅是返回值？

如何解决为什么我必须在 React 事件处理程序中放置一个箭头函数而不仅仅是返回值？

我看过一些教科书和博客文章，但大多数似乎只是在没有明确解释的情况下喃喃自语......

在 React 的事件处理程序中，我被告知要写，

onChange = {() => setValue(someValue)}

onChange = {() => this.props.someFunction(someValue)}

我只是不明白为什么我不能简单地写一些类似的东西

onChange = {setValue(someValue)}

onChange = {this.props.someFunction(someValue)}

由于在我的理解中 setValue 本身已经是一个函数，“() =>”对我来说看起来绝对是多余的。

另一方面，如果事件是在一个类中定义的，那么我可以这样写

onChange = {this.someFunction}

在这种情况下，为什么我不需要写成 aarow 函数呢？喜欢

onChange = {() => this.someFunction}

这不是双重标准吗？？？

解决方法

因为：

this.someFunction

还有这个：

this.someFunction()

是两个非常不同的东西。第一个是对函数本身的引用，而第二个执行函数并计算其返回值。

所以当你这样做时：

onChange = {this.someFunction}

你说的：

当值发生变化时，执行 this.someFunction 并将其传递给 change 事件。

但是当你这样做时：

onChange = {this.someFunction()}

你说的：

立即执行 this.someFunction ，不传递任何内容。当值改变时，执行任何 this.someFunction returned（它可能不是一个可执行函数）并将其传递给 change 事件。

箭头函数的目的是创建一个不存在的函数。所以如果你只有一个简单的函数引用，就传递它：

onChange = {this.someFunction}

但是假设您想做两件事，而不仅仅是调用那一个函数。在这种情况下，您可以将这两件事包装在一个匿名函数中：

onChange = {(e) => {
  this.someFunction(e);
  somethingElse();
}}

或者更简单，假设您有一个简单的函数引用，但它期望新的更改值而不是更改事件本身：

onChange = {(e) => this.someFunction(e.target.event)}

基本上，如果您还没有可以执行您想要的功能的函数，您就可以创建一个函数。