检测Shift键是否按下React Native

kb5ga3dv  于 2023-03-13  发布在  React
关注(0)|答案(3)|浏览(177)

我如何检测当前是否按下了shift键?我有一个文本输入,当用户按下enter键时,我只想在他们没有当前按下enter键时提交表单(与桌面上的Facebook Messenger的表单功能相同)。
下面是我的文本输入:

<TextInput
    style={styles.input}
    placeholder={'Enter message'}
    onKeyPress={this.handleKeyPress}
/>

这里是处理器:

handleMessageInputKeyPress(e) {
    if(e.nativeEvent.key == "Enter"){
        // Now check if the SHIFT key is currently pressed or not...
    }
}
ntjbwcob

ntjbwcob1#

你可以使用事件监听器来检测按键的任何时候被按下(或未按下),然后过滤结果,找到你想要用作条件的按键。

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。然后你可以把这个值插入到任何你需要的地方。提示:您可以使用此格式监听任何其他键。我很难找到有关这些键的名称的文档。如果您在查找键名时遇到困难,请执行此代码,然后在downHandler中的if语句之前控制台日志key
此外,确保将侦听器留在useEffect中,否则会发生数据泄漏。

nzkunb0c

nzkunb0c2#

对于那些仍在寻找解决方案的人:
回调onKeyPress接收的event似乎具有以下属性:

很高兴看到它也有ctrlKeyaltKey
因此,解决办法是:

<TextInput
    onKeyPress={event => {
        if (event.shiftKey && event.key === "Enter"){
            // ...
        }
    }} />
pn9klfpd

pn9klfpd3#

做一个像这样的钩子

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

const useKeyPress = (keyMap, callbackMap) => {
    const [keyPressed, setKeyPressed] = useState(new Set());

    const downHandler = (event) => {
      event.preventDefault();
      const { key, altKey, shiftKey, ctrlKey } = event;
  
      const modifiers = [];
      if (altKey) modifiers.push('alt');
      if (shiftKey) modifiers.push('shift');
      if (ctrlKey) modifiers.push('ctrl');
  
      // Generate all possible combinations of modifiers and key
      const combinations = [      [key.toLowerCase()],
        [modifiers.join('+'), key.toLowerCase()],
        [modifiers.reverse().join('+'), key.toLowerCase()]
      ];
  
      for (const combination of combinations) {
        const id = keyMap[combination.join('+')];
        const callback = callbackMap[id];
        if (callback) {
          const newKeyPressed = new Set(keyPressed);
          newKeyPressed.add(combination.join('+'));
          setKeyPressed(newKeyPressed);
          callback();
          break;
        }
      }
    };
  
    const upHandler = (event) => {
      event.preventDefault();
      const { key, altKey, shiftKey, ctrlKey } = event;
  
      const modifiers = [];
      if (altKey) modifiers.push('alt');
      if (shiftKey) modifiers.push('shift');
      if (ctrlKey) modifiers.push('ctrl');
  
      // Generate all possible combinations of modifiers and key
      const combinations = [      [key.toLowerCase()],
        [modifiers.join('+'), key.toLowerCase()],
        [modifiers.reverse().join('+'), key.toLowerCase()]
      ];
  
      for (const combination of combinations) {
        const id = keyMap[combination.join('+')];
        const callback = callbackMap[id];
        if (callback) {
          const newKeyPressed = new Set(keyPressed);
          newKeyPressed.delete(combination.join('+'));
          setKeyPressed(newKeyPressed);
          break;
        }
      }
    };
    
      
  
    useEffect(() => {
      window.addEventListener('keydown', downHandler);
      window.addEventListener('keyup', upHandler);
  
      return () => {
        window.removeEventListener('keydown', downHandler);
        window.removeEventListener('keyup', upHandler);
      };
    });
  
    return keyPressed;
  };

export default useKeyPress;

然后用户可以像这样在其他组件中使用它;

// Keyboard mappings
  const keyMap = {
    'ctrl+shift+p': 'preview',
  };
  const callbackMap = {
    'preview': () => setShowModal(prevModalVisible => !prevModalVisible),
  };
  useKeyPress(keyMap, callbackMap);

有了技术,你可以Map任何三个组合键你喜欢

相关问题