Question

我有以下钩子可以捕获 Shift+Enter 组合键并显示警报和功能

  useEffect(() => {
    document.addEventListener('keydown', (e) => {  
        e.preventDefault();
        if (e.key === 'Enter' && e.shiftKey) {         
            alert("<br/> Detected Shift+Enter");
            onSubmit();
          }
    })
}, []);

问题是在加载组件时，没有输入可以注册信息了。但是如果我删除这个 useEffect 一切正常。有什么想法吗？

Answer 1

这里的问题是您在按键时使用了 e.preventDefault();。

删除它后，输入将开始按预期工作。

Answer 2

好吧，您正在注册一个顶级事件侦听器，以防止对关键事件进行默认处理。那一定会发生。也许只有 e.preventDefault() 当您检测到特殊的 shift-enter 组合？

另外，不要忘记通过从 useEffect 返回一个函数来取消注册全局侦听器。

您可能还想查看 react-use library's useEvent 钩子。

Answer 3

keydown 事件的默认行为是将按下的键上的字符输入到当前聚焦的输入中。

你正在阻止。

不要。

Answer 4

因为您使用的是 e.preventDefault();。要解决此问题，您只需将其移动到 onSubmit 之前和 if 块内

反应：useEffect 后输入不再工作

4 个答案: