javascript - 为什么 React 的 onClick 函数需要独特的语法?与其他事件触发器相比?

标签 javascript reactjs

我开始注意到一种不寻常的模式。任何 onClick 事件都需要语法为 onClick={() => «函数名称»}。 我还花了时间研究为什么 onClick 似乎是唯一需要括号的事件处理程序,但我能找到的只是解释要做什么的文章,而不是为什么这样做就是这样工作的。 OnChange 和其他事件不需要相同的语法,但它们都是事件类型。欢迎所有建议和解释。

最佳答案

onClick 不需要“括号”。这是一个箭头函数,它是将事件处理程序传递给组件的几种方法之一。

这是一种方法:

onClick={this.nameOfFunction} // In this case, you need to bind the this in the constructor.

这是另一种方式:

onClick={this.nameOfFunction.bind(this)} 

这是另一个:

onClick={() => this.nameOfFunction()}

但是,正如文档所说:“在渲染中使用箭头函数会在每次组件渲染时创建一个新函数,这可能会对性能产生影响(见下文)。”

关于javascript - 为什么 React 的 onClick 函数需要独特的语法?与其他事件触发器相比?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51142831/

相关文章:

javascript - 避免在 JavaScript 继承中使用 new

javascript - 将 html 元素本身传递给 javascript 函数

javascript - 如何在 4 帧之间连续制作动画

reactjs - 删除项目后 react 列表渲染错误数据

reactjs - 在 React 中将 key 渲染为 html 属性

reactjs - 如何在 react 状态下使用索引更新对象?

javascript - 有没有办法将 HTML 响应转换为 JSONP 对象或其他方式来获得成功事件?

android - React-Native ListView renderRow 问题传递 Prop 。正确的方式或错误的方式

javascript - 组件 onPress 函数内的渲染按钮显示最后一个 i。 React-Native

javascript - 使用 Ramda 透镜设置指定对象的结构值