Javascript 如何在React应用程序中检测页面上任意位置的按键？

我正在尝试在用React构建的应用程序中检测页面上的任意位置是否有按键

我记得它在jQuery中非常简单，但我想看看它是否可以在React中实现。我不想做一个“弗兰肯斯坦”项目，也就是说，如果可以避免的话，在react中有一些部分，在jQuery中有一些部分

到目前为止，我已经：

export default function App() {
    const handleKeyPress = (event) => {
        console.log(event.keyCode);
    }

    return (
        <div
            onKeyDown={handleKeyPress}
            tabIndex="0"
        >
            <Header page_num={100}/>
        </div>
    );
}

但它似乎只有在用户单击页面中的实际div，然后按键时才起作用

我希望用户不必单击页面上的任何位置就可以检测按键。

您可以使用useEffect挂钩来实现这一点，并向文档中添加事件侦听器：

希望这有帮助

您可以使用useEffect钩子来实现这一点，并将事件侦听器添加到文档中：

---

希望这有帮助

他们必须点击页面才能聚焦，但是你应该使用绑定文档上的事件。他们必须点击页面才能聚焦，但是你应该使用绑定文档上的事件。

import React, { useEffect } from "react";

export default ({ name }) => {
  useEffect(() => {
    function handleKeyDown(e) {
      console.log(e.keyCode);
    }

    document.addEventListener('keydown', handleKeyDown);

    // Don't forget to clean up
    return function cleanup() {
      document.removeEventListener('keydown', handleKeyDown);
    }
  }, []);

  return <div>Keydown</div>;
};

import React, { useEffect, useRef } from "react";

function Hello({ onKeyDown }) {
  const ref = useRef();

  useEffect(() => {
    function handleKeyDown(e) {
      // check if keydown was contained in target div
      if (!ref.current || ref.current.contains(event.target)) {
        return;
      }

      // Emit event to parent component
      onKeyDown(e);
    }

    document.addEventListener("keydown", handleKeyDown);

    return function cleanup() {
      document.removeEventListener("keydown", handleKeyDown);
    };
  }, []);

  return (
    <div ref={ref} tabIndex="0">
      foo bar baz
    </div>
  );
}

export default Hello;