在 React 中使用普通 JavaScript 事件
介绍
React 支持 JavaScript 所支持的事件，其工作原理也类似，但显著的区别在于其使用事件的方式。有两个显著的区别：
- 要在 React 中使用 JavaScript 事件，您需要使用驼峰式命名法来命名，例如eventName()。
- 如果您在 React 中使用 JSX，那么您需要将事件作为字符串传递给事件处理程序。
JavaScript 事件用于根据点击、触摸、向上和向下等事件执行各种操作。所有这些事件（称为合成事件）都可以在 React 中使用。本指南将演示如何在 React 组件中使用纯 JavaScript 事件。
事件监听器和事件函数
与 JavaScript 不同，React 不允许您像使用 JavaScript 那样使用事件名称，例如onclick()；因此您需要遵循事件名称作为onClick()。
您仍然可以使用用于表示在当前浏览器窗口中打开的 DOM 文档的窗口对象来使用普通的 JavaScript 事件。
实现 JavaScript click 事件
点击事件是最常见的事件，用于根据按钮、标签、跨度、链接等元素上的点击事件触发功能。要使用纯 JavaScript 在 React 中添加点击事件，您需要使用addEventListener()将点击事件分配给元素。
创建一个<button>元素作为ref props，以便可以访问它来触发 click 事件。
render() {
return (
<>
<button ref={mybutton => (this.btn = mybutton)}>Click me</button>
</>
);
}
<button>元素具有名为ref 的附加 props ，用于从 DOM 中查找元素。要分配 JavaScript 点击事件处理程序，您可以按照以下示例进行实现。
componentDidMount() {
this.btn.addEventListener("click", this.onButtonClick);
}
addEventListener()指定事件处理程序和事件名称，以便在按钮被点击后执行一项活动。
onButtonClick() {
alert("Clicked on Button");
}
一旦点击按钮，就会显示触发点击事件的警告框。
实现 JavaScript change 事件
change 事件根据现有值触发事件，并根据更改的值处理更改。使用 addEventListener ()，您可以将change指定为事件处理程序，然后指定事件处理程序函数，如下所示。
componentDidMount() {
this.input.addEventListener("change", e => this.onChange(e));
}
然后，您可以实现事件处理程序函数来处理更新的值。
onChange(e) {
console.log("Updated values is :-", e.target.value);
}
或者，您可以像下面这样使用document.getElementByID()和addEventListener()删除监听器。
document.getElementById("#your_id").addEventListener("change", this.onChange);
删除事件监听器并分配事件函数
到目前为止，本指南已介绍如何定义 JavaScript 事件处理程序和相关事件处理程序函数。但一旦当前组件从 DOM 中卸载，您就应该删除侦听器。
要删除事件监听器，可以使用removeEventListener()以及事件类型和事件处理函数。
componentWillUnmount() {
this.btn.removeEventListener("click", this.onButtonClick);
this.input.removeEventListener("change", e => this.onChange(e));
}
正如您在上面的代码中看到的，componentWillUnmount()函数针对任何需要删除的内容（例如承诺和事件）实现。
在函数内部，删除的两个事件来自 DOM，即 click和change，后跟事件处理程序函数，因此您可以使用removeEventListener()从组件中删除附加的事件。
或者，您可以使用document.getElementByID()和removeEventListener()来删除监听器。
document.getElementById("#your_id").removeEventListener("change", this.onChange);
结论
React 支持大多数 JavaScript 事件，但命名约定的版本不同；因此，您应该只使用基于 React 的命名约定，而不是带有 React 元素的普通 JavaScript 事件。
事件根据点击、触摸、拖动、向上、向下等操作处理元素的响应。要执行特定事件，您可以使用各种 React 合成事件来触发任何操作。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~