2

如何检测当前是否按下了 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...
    }
}
4

2 回答 2

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.

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

于 2021-04-02T01:58:02.523 回答
-1

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

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

在此处输入图像描述

很高兴看到它也有ctrlKey& altKey。

所以解决方案是：

<TextInput
    onKeyPress={event => {
        if (event.shiftKey && event.key === "Enter"){
            // ...
        }
    }} />
于 2020-03-26T13:29:12.777 回答