React 组件中的事件监听器
介绍
您可能对在原生 JavaScript 应用中监听事件并不陌生。但在 React 应用中监听相同的事件可能会有点令人困惑。您可能会问自己：“我应该在哪里添加事件监听器？”或者“我应该何时以及如何取消事件？”本指南将回答这些问题。
添加事件监听器
您可以使用window.addEventListener方法在 React 应用程序中创建事件监听器，就像在原始 Javascript 应用程序中一样：
window.addEventListener('keydown', (event) => {
// ...
});
上面的代码片段向您展示了如何向窗口添加keydown事件监听器。此代码片段的棘手部分是知道将其放置在哪里。React 是一个基于组件的系统。您的所有页面都只是组件，这意味着当您添加事件监听器时，它将需要在组件内部发生。例如，这是一个您可以在其中添加keydown监听器的组件：
import React from 'react';
const App = (props) => {
window.addEventListener('keydown', (event) => {
// ...
});
return (
<div className='container'>
<h1>Welcome to the Keydown Listening Component</h1>
</div>
);
};
上面的代码有几个问题。
- 您只希望在组件完成渲染时添加事件监听器。
- 当组件卸载时，您需要删除事件监听器。
要解决第一个问题，您需要使用useEffect钩子。摘自React.useEffect 文档：
传递给useEffect的函数将在渲染提交到屏幕后运行。
const App = (props) => {
React.useEffect(() => {
window.addEventListener('keydown', (event) => {
// ...
});
});
return (
<div className='container'>
<h1>Welcome to the Keydown Listening Component</h1>
</div>
);
};
现在addEventListener正在正确的时间被调用，但仍然存在一个问题：现在的编写方式将在所有组件更改时添加一个新的侦听器。这是因为您需要告诉useEffect钩子仅在组件首次渲染时运行。为此，您只需添加一个空的依赖项数组作为useEffect的第二个参数：
const App = (props) => {
React.useEffect(() => {
window.addEventListener('keydown', (event) => {
// ...
});
}, []);
return (
<div className='container'>
<h1>Welcome to the Keydown Listening Component</h1>
</div>
);
};
传递该依赖项数组会告诉钩子仅在其中一个依赖项发生变化时运行回调代码。通过传递一个空数组，useEffect钩子将只运行一次。在这种情况下，您需要这种行为，因为您不想添加重复的事件监听器。
删除事件监听器
现在您已将事件侦听器添加到组件中，您还需要知道当组件不再挂载时如何删除该侦听器。删除事件侦听器的函数是window.removeEventListener。
window.removeEventListener('keydown', handlekeyDown);
您会注意到， removeEventListener的第二个参数不是匿名函数，而是一个变量。这对于识别要删除的事件侦听器是必要的，因为从技术上讲，您可以同时运行多个keydown事件侦听器。
现在，您只需要在组件卸载时调用removeEventListener，但是如何在功能组件中执行此操作？没有componentDidUnmount生命周期方法，但useEffect钩子可以通过回调函数中的可选返回值来帮助您。您可以在useEffect回调中返回一个函数，该函数将在组件卸载时运行。成功删除事件侦听器后，您的代码应如下所示：
const App = (props) => {
const handleKeyDown = (event) => {
console.log('A key was pressed', event.keyCode);
};
React.useEffect(() => {
window.addEventListener('keydown', handleKeyDown);
// cleanup this component
return () => {
window.removeEventListener('keydown', handleKeyDown);
};
}, []);
return (
<div className='container'>
<h1>Welcome to the Keydown Listening Component</h1>
</div>
);
};
结论
就这样，您就掌握了如何在 React 组件中添加和删除事件监听器。有关使用 React 组件的更多信息，请查看本指南中的钩子。谢谢阅读！
了解更多
探索 Pluralsight 的这些 React 课程以继续学习：
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~