如何让 onKeyDown 事件在 Next.js/React 中工作

Question

我正在使用 Next.js 构建一个网站，目前我正在尝试在按键时运行一个简单的函数。我遇到的问题是 onKeyDown 事件没有像我预期的那样被触发。我的代码如下：

; console.log("Key Pressed")}>

当前它放置在“main”元素中，这是该组件的顶部根元素。 我也尝试将 onKeyDown 事件放置在许多其他元素中，但没有成功。 我不确定是否是位置导致了问题，还是我对如何使用此事件缺乏了解。任何帮助将不胜感激。

至于现在，我只是希望它在控制台中写入一些内容，以便我可以看到它触发了。我尝试使用 onKeyPress 代替，并为事件分配一个函数而不是 lambda 表达式，这应该没有什么区别。

Answer 1

在您的组件中，使用 useEffect 向文档添加（和删除）事件侦听器。

import { useEffect } from 'react'
// etc...

const Component = () => {

  useEffect(() => {
    const keyDownHandler = (e) => console.log(`You pressed ${e.code}.`);
    document.addEventListener("keydown", keyDownHandler);

    // clean up
    return () => {
      document.removeEventListener("keydown", keyDownHandler);
    };
  }, []);

  return <main>Press a key</main>;
};

您甚至可以创建一个自定义挂钩（注意依赖项列表）：

import { useEffect } from 'react'
// etc...

const useKeyDown = (handler, deps = []) => {
  useEffect(() => {
    document.addEventListener("keydown", handler);
    // clean up
    return () => {
      document.removeEventListener("keydown", handler);
    };
  }, deps);
};

const Component = () => {
  useKeyDown((e) => console.log(`You pressed ${e.code}.`), []);
  return <main>Press a key</main>;
};