迹忆客 专注技术分享

单页应用程序因其速度和可靠性而在今天很普遍，而 React 是构建它们的主要库。事件侦听器和事件处理函数为 SPA 提供了基本功能。

React 支持处理与 DOM 中相同的事件。有一些关键区别，例如处理函数的属性名称的命名约定。

在 React 中，事件处理程序名称使用 camelCase 约定命名。此外，由于 JSX 中的花括号，我们可以直接传递 JavaScript 函数，而不是像在 HTML 中那样传递表示函数的字符串。

常规 DOM 中的 EventTarget 接口包括 addEventListener() 方法，通常用于为特定 HTML 元素设置事件侦听器。

React 开发人员不必使用此方法，并且可以在声明式定义 JSX 中的元素时添加事件侦听器。

让我们看一个例子。

export default function App() {
  return <button onClick={() => alert("hey")}>A sample button</button>;
}

这是 React 中事件监听器最基本的例子。onClick 不是唯一可能的事件侦听器，你可以侦听更多事件。

事件侦听器属性的值可以是内联函数，如上例所示。但是，仅当它是单行表达式时，才能直接将函数作为事件处理程序传递。

大多数情况下，onClick 事件侦听器的值将引用一个多行函数，每次单击按钮时都需要执行该函数。

对于功能组件，事件处理程序通常存储在变量中。对于类组件，它可以是两者，但它通常是实例上的属性。

当在类组件的函数中使用时，你应该知道 this 关键字指的是什么。可能需要使用 bind() 函数。

使用箭头函数获得更多可预测的行为。

React 和常规 DOM 事件处理程序之间的另一个区别是它们需要显式调用 e.preventDefault() 方法来停止元素的默认行为。

React 原生支持许多不同的事件。你不太可能需要在 React 中添加任何自定义事件侦听器。

你可以在这个页面获得支持的事件侦听器的完整列表。但是，如果你需要一个不受支持的事件侦听器，你仍然可以使用 addEventListener() 和 removeEventListener() 方法添加自定义事件侦听器。

但是，它需要在生命周期方法中完成，以控制在安装元素时添加事件处理程序，并在卸载元素时删除事件处理程序。

componentDidMount() {
    this.el.addEventListener("el-hover", this.handleNvEnter);
  }

componentWillUnmount() {
    this.el.removeEventListener("el-hover", this.handleNvEnter);
  }

在这个例子中，el 是 React 应用程序中任何特定元素的替代。

当 React 应用程序在组件生命周期的最后阶段首次安装和删除时，我们使用 window 接口中的 addEventListener() 和 removeEventListener() 方法添加自定义事件侦听器。