在 React 中添加事件监听器

Irakli Tchigladze 2023年1月30日 2022年5月18日
  1. 在 React 中为元素添加事件监听器
  2. 在 React 中添加自定义事件监听器
在 React 中添加事件监听器

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

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

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

在 React 中为元素添加事件监听器

常规 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 原生支持许多不同的事件。你不太可能需要在 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() 方法添加自定义事件侦听器。

Irakli Tchigladze avatar Irakli Tchigladze avatar

Irakli is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.

LinkedIn

相关文章 - React Event