如何使用 React Native 中的事件侦听器和钩子检查是否按下/按住某个键?

奥斯汀·鲍尔森

如果我需要知道当前是否正在按下像 shift 键这样的键,我怎样才能找到该信息?此解决方案应将此信息分配给可以像这样调用的单个变量:

if(shiftHeld){
  //Do the thing.
}
奥斯汀·鲍尔森

此解决方案将使用带有钩子和事件侦听器的 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 键将状态更改为 true 或 false。然后您可以将该值插入到您需要的任何位置。提示:您可以使用此格式来侦听任何其他键。我很难找到有关密钥名称的文档。如果你有困难就找到了关键的名称,执行那么这段代码控制台登录key就在之前if的声明downHandler

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何从React Native的EventEmitter实例中删除侦听器?

如何将事件侦听器添加到React Native中的状态

如何检查退格键(删除)按下React Native(iOS)

在我的React自定义钩子的每次调用中添加和删除事件侦听器是否太昂贵?如何避免呢?

如何检查React Native Debugger上的钩子

如何设置事件侦听器并使用react钩子在首次触发事件后将其删除?

如何取消订阅 React-Native 中的 Firestore 侦听器?

如何在React Native中为AppState使用Blur事件

如何在JavaFX中在没有侦听器的情况下检查键是否按下?

如何在带有钩子的React Native中使用refs?

如何使用钩子在 react-native 中分派多个动作?

在 React 和 React Native 中使用模型

是否可以在react native中使用react钩子?

如何在React Native中安装React Native Maps?

如何将我自己的事件侦听器添加到我的自定义 React Native 组件中?

如何使用 NetInfo React-Native 专门检查 URL?

如何使用 Jest 在 React Native 中模擬“react-native-config”庫的配置數據?

如何使用React Native在整个应用程序背景中应用react-native-linear-gradient

如何使用 appium 从 react-native app 中查找元素 - React Native + Appium

如何使用react native识别元素是否在屏幕上?

如何使用react native检测复选框是否选中?

react-native:如何结合 react-native-router-flux 和 react-native-drawer?

如何使用 React Native 实现应用内浏览器?

如何使用Stripe(stripe.js)和react-native

如何使用Appium和React Native在Android上接受警报?

如何在React Native中使用vw和vh css

React Native如何使用Expo和Firebase设置推送通知

如何使用React Native和Expo显示图像?

如何在 Android Studio 中使用 Kotlin 和 React Native?