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

我正在尝试在使用Reaction构建的应用程序中检测页面上任何位置的按键。

我记得在jQuery中很容易，但我想看看是否可以在Reaction中完成。我不想做一个‘科学怪人’项目，也就是说，如果完全可以避免的话，在Reaction中有一些部分，在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钩子来实现这一点，并向document添加事件监听器：

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>;
};

这是一个正在运行的example。

假设<div>通过tabindex或类似方式聚焦，您将能够在键盘按下处理程序中看到e.target将是<div>。您还可以将该功能包装在另一个组件中，并在其Keydown处理程序中使用contains检查是否在该元素上执行了Keydown，而不是在外部执行。

下面是另一个example，它使用contains检查事件目标是否在div中ref：

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;

希望这会有帮助！