在反应打字稿中全局检测按键？

Question

我想检测整个网站上的按键，即全局监听按键。我尝试在 React 中添加 onKeyDown 属性，但它没有捕获全局事件

<div onKeyPress={(e) => console.log(e)}>
    <MainLayout visualizerMode={true} />
</div>

Answer 1

这可以通过在文档对象中监听

onKeyDown

类型事件来实现。

将其添加到您的反应组件中：

useEffect(() => {
    document.addEventListener('keydown', (e: KeyboardEvent) => console.log(e))
}, [])

希望对您有帮助！

Answer 2

您应该使用析构函数，否则您将通过组件重新渲染来重复事件。

const doStuff = useCallback(
    (e: KeyboardEvent) => {
      {....}
    },
    [],
  );

  useEffect(() => {
    document.addEventListener('keydown', doStuff);

    return () => {
      document.removeEventListener('keydown', doStuff);
    };
  }, [doStuff]);