在 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 is a writer who loves computers and helping people solve their technical problems. He lives in Georgia and enjoys spending time with animals.
LinkedIn