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

【问题标题】：How can I get onKeyDown event to work in Next.js/React如何让 onKeyDown 事件在 Next.js/React 中工作
【发布时间】：2022-11-28 09:41:48
【问题描述】：

我正在使用 Next.js 构建一个网站，目前我正在尝试让一个简单的函数在按下某个键时运行。我遇到的问题是 onKeyDown 事件没有像我预期的那样被触发。我的代码如下： <main onKeyDown={e => console.log("Key pressed")}>

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

至于现在，我只是想让它在控制台中写一些东西，这样我就可以看到它触发了。我试过使用 onKeyPress 代替，以及为事件分配一个函数而不是 lambda 表达式，这应该没有什么区别。

【问题讨论】：

如果您试图捕获页面上的所有按键事件，您可能需要将事件侦听器放在window 或document 上。除非你能以某种方式关注“主要”，否则我不确定它会捕获该事件类型。
@tarrball 好吧，我最初的方法是这样的：globalThis.addEventListener("keydown", e => { // do stuff }) 但我很快发现这使得它从网站上的所有页面触发。但是，谢谢，我会看看我是否能得到类似的东西。
我通过简单地将 <main> 的 tabIndex 属性设置为 -1 来让它工作：<main tabIndex={-1} onKeyDown={handleKeyDown}> 将它传递给函数 handleKeyDown 是不相关的。

标签： javascript html reactjs next.js react-component

【解决方案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>;
};

【讨论】：