迹忆客 专注技术分享

要检测在 React.js 中何时按下 Esc 键：

1. 将 keydown 事件监听器添加到文档元素。
2. 当用户按下某个键时，检查该键是否为 Esc。
3. 如果按下的键是 Escape，则调用函数或运行一些逻辑。

import {useEffect} from 'react';

const App = () => {
  const myFunction = () => {
    // your logic here
    console.log('pressed Esc ✅');
  };

  useEffect(() => {
    const keyDownHandler = event => {
      console.log('User pressed: ', event.key);

      if (event.key === 'Escape') {
        event.preventDefault();

        // 👇️ your logic here
        myFunction();
      }
    };

    document.addEventListener('keydown', keyDownHandler);

    // 👇️ clean up event listener
    return () => {
      document.removeEventListener('keydown', keyDownHandler);
    };
  }, []);

  return (
    <div>
      <h2>Hello world</h2>
    </div>
  );
};

export default App;

我们使用 useEffect 钩子将 keydown 事件侦听器添加到文档元素。

现在每次用户按键时，都会调用 keyDownHandler 函数。

KeyboardEvent 对象的 key 属性返回用户按下的键的值。

在函数中，我们简单地检查用户是否按下了 Esc 键，如果按下了，我们就调用一个函数。

我们从 useEffect 钩子返回的函数用于在组件卸载时清理事件侦听器。

我们应该始终清理您设置的所有事件侦听器以避免应用程序中的内存泄漏。

我们将 keydown 事件添加到文档元素，因此只要文档具有焦点，该事件就会被触发。

这种方法可用于关闭弹出菜单、模式或运行任何其他自定义逻辑。

我们可以通过访问此 MDN 页面查看用户可能按下的键。

条件 if (event.key === 'Escape') {} 涵盖所有操作系统 - Windows、Mac、Linux、Android 等。