如何使用 React Native 中的事件侦听器和挂钩检查键是否 pressed/held 已关闭？

Question

如果我需要知道当前是否按下了像 shift 键这样的键，我该如何找到该信息？此解决方案应将此信息分配到一个可以像这样调用的变量中：

if(shiftHeld){
  //Do the thing.
}

Answer 1

此解决方案将使用带有挂钩和事件侦听器的 React Native。您可以使用事件侦听器来检测任何时候按下（或未按下）键，然后过滤要用作条件的键的结果。这是解决方案：

  const [shiftHeld, setShiftHeld] = useState(false);


  function downHandler({key}) {
    if (key === 'Shift') {
      setShiftHeld(true);
    }
  }

  function upHandler({key}) {
    if (key === 'Shift') {
      setShiftHeld(false);
    }
  }

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

这将根据是否按住 Shift 键将状态更改为真或假。然后您可以将该值插入任何您需要的地方。提示：您可以使用此格式来侦听任何其他键。我很难找到有关密钥名称的文档。如果您在查找密钥名称时遇到问题，请执行此代码，然后在 downHandler.

中的 if 语句之前控制台记录 key

此外，确保将侦听器留在 useEffect 中，否则会导致数据泄漏。

如何使用 React Native 中的事件侦听器和挂钩检查键是否 pressed/held 已关闭？

How to check if a key is pressed/held down using event listeners and hooks in React Native?

addeventlistener

reactjs

react-native

react-native-web

react-hooks