检测Shift键是否关闭React Native

Question

如何检测当前是否按下了shift键？我有一个文本输入，当用户按下回车键时，我只想提交表格，如果他们不当前按下回车键（与桌面上的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...
    }
}

Answer 1

对于那些仍在寻找解决方案的人：

回调event收到的onKeyPress似乎具有以下属性：

很高兴看到它也具有ctrlKey和altKey。

因此解决方案是：

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

Answer 2

您可以使用事件侦听器来检测按键被按下（或未按下）的任何时间，然后过滤要用作条件的键的结果。下面是一个使用钩子的例子：

  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 中，否则会导致数据泄漏。