在 ReactJS 中处理事件时的箭头函数与常规函数答案

【问题标题】：Arrow function vs regular function while handling events in ReactJS在 ReactJS 中处理事件时的箭头函数与常规函数
【发布时间】：2021-10-23 15:13:36
【问题描述】：

如果我错了，请纠正我。

() => this.handleClick()

与

相同

function callHandleClick(){

return this.handleClick()

}

但下面的工作。

<input type="submit" onClick={ () => this.handleClick() }/>

但是，这不是

<input type="submit" onClick={function callHandleClick(){return this.handleClick()}}/>

我已经定义了handleClick 方法。是否可以使用普通函数而不是箭头函数来处理点击事件？

【问题讨论】：

【解决方案1】：

() => this.handleClick()

不一样

function callHandleClick(){
  return this.handleClick()
}

相当于：

const callHandleClick = () => this.handleClick()

因此，您在handleClick 中定义了一个函数。而是在外面定义它并像这样传递它：

onClick={callHandleClick}

【讨论】：