哪一个是 React 中的“事件处理程序”？答案

【问题标题】：Which one is an "Event Handler" in React?哪一个是 React 中的“事件处理程序”？
【发布时间】：2020-04-20 12:16:59
【问题描述】：

我想问一个关于 ReactJs 中“事件处理程序”的基本问题。

这是 React 组件的一些示例：

import React from 'react'

class Hello extends React.Component {
  handleClick = () => {
    console.log("clicked");
  }

  render () {
    const { isDisabled = false } = this.props;
    return (
      <button onClick={() => isDisabled && this.handleClick()}>
        Hello Button
      </button>
    )
  }
}

export default Hello;

该组件中的“事件处理程序”是“handleClick”函数，还是() => isDisabled && this.handleClick()，还是它自己的“onClick”？

谢谢

【问题讨论】：

“事件处理程序”没有官方定义。事件处理程序只是一个“处理事件”的函数。如果您只想将此名称赋予直接传递给onClick 的函数，那么就这样做。但是，如果该函数包含大部分事件处理逻辑，那么将handleClick 称为事件处理程序也不是一件容易的事。这里没有严格的规定。

标签： javascript reactjs

【解决方案1】：

传递给onClick的函数是the event handler。

使用 JSX，您可以将函数作为事件处理程序传递，而不是字符串。

另外，根据Passing Arguments to Event Handlers，你可以断定onClick是一个事件处理器。

在循环中，通常希望将额外的参数传递给事件处理程序。例如，如果 id 是行 ID，则以下任一方法都可以：

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

【讨论】：

我认为在反应中，他们不会将事件 e 传递给该处理程序。不过我可能是错的。
如果“他们”你的意思是反应，所以事件像普通的 html 元素一样传递
是的，我的意思是反应库，几周前我有这个，角度由于某种原因没有通过事件。我不太明白您的第二个按钮单击侦听器是如何工作的。当您直接调用 .bind 函数时，它看起来有点不对劲。这是返回实际处理程序的更高阶函数吗？
@TheFool：React 确实将事件对象传递给处理程序。 .bind 返回一个新函数：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
很好，直到。幸运的是，我永远不必使用绑定，但很高兴知道。谢谢。

【解决方案2】：

这只是一个函数定义（你将一个匿名函数赋给变量handleClick）

 handleClick = () => {
    console.log("clicked");
  }

下面将附加一个匿名函数 () => {} 作为事件处理程序到调用原始 handleClick 函数的按钮元素

 <button onClick={() => isDisabled && this.handleClick()}>

事件名称是“click”，它的处理程序是您分配给它的。在这种情况下，调用hanldeClick 的匿名函数如果isDisabled 评估为假（短路评估）。

在 JavaScript 中，它们通常被称为“事件侦听器”。

【讨论】：

【解决方案3】：

基本上，传递给onChange、onBlur、onClick等绑定事件的函数是事件处理程序。

handle events in React JS有多种方式

内联方法绑定
构造函数中的绑定方法
使用箭头函数的方法绑定
绑定方法参数
使用箭头函数的参数绑定方法

查看以上参考网站了解更多信息。

【讨论】：