React useKeyPress hook

监听给定按键的按下状态的变化。

• 使用useState() hook创建一个状态变量，用于保存给定按键的按下状态。
• 定义两个处理函数，根据按键按下或释放更新状态变量。
• 使用useEffect() hook和EventTarget.addEventListener()处理'keydown'和'keyup'事件。
• 使用EventTarget.removeEventListener()在组件卸载后进行清理。

const useKeyPress = targetKey => {
  const [keyPressed, setKeyPressed] = React.useState(false);

  const downHandler = ({ key }) => {
    if (key === targetKey) setKeyPressed(true);
  };

  const upHandler = ({ key }) => {
    if (key === targetKey) setKeyPressed(false);
  };

  React.useEffect(() => {
    window.addEventListener('keydown', downHandler);
    window.addEventListener('keyup', upHandler);

    return () => {
      window.removeEventListener('keydown', downHandler);
      window.removeEventListener('keyup', upHandler);
    };
  }, []);

  return keyPressed;
};

const MyApp = () => {
  const wPressed = useKeyPress('w');

```jsx
return <p>"w"键{!wPressed ? '未' : ''}被按下！</p>;
};

ReactDOM.createRoot(document.getElementById('root')).render(
  <MyApp />
);