在 react 中添加事件监听器-ag捕鱼王app官网

单页应用程序因其速度和可靠性而在今天很普遍，而 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 buttonbutton>;
}

这是 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() 方法添加自定义事件侦听器。