我有以下钩子可以捕获 Shift+Enter
组合键并显示警报和功能
useEffect(() => {
document.addEventListener('keydown', (e) => {
e.preventDefault();
if (e.key === 'Enter' && e.shiftKey) {
alert("<br/> Detected Shift+Enter");
onSubmit();
}
})
}, []);
问题是在加载组件时,没有输入可以注册信息了。但是如果我删除这个 useEffect
一切正常。有什么想法吗?
答案 0 :(得分:1)
这里的问题是您在按键时使用了 e.preventDefault();
。
删除它后,输入将开始按预期工作。
答案 1 :(得分:1)
好吧,您正在注册一个顶级事件侦听器,以防止对关键事件进行默认处理。那一定会发生。也许只有 e.preventDefault()
当您检测到特殊的 shift-enter 组合?
另外,不要忘记通过从 useEffect
返回一个函数来取消注册全局侦听器。
您可能还想查看 react-use library's useEvent
钩子。
答案 2 :(得分:0)
keydown 事件的默认行为是将按下的键上的字符输入到当前聚焦的输入中。
你正在阻止。
不要。
答案 3 :(得分:0)
因为您使用的是 e.preventDefault();
。要解决此问题,您只需将其移动到 onSubmit
之前和 if
块内