React中如何正确监听全局快捷键（比如Ctrl+K）？

博潇提问于 2026-02-26 09:22:21 阅读 173

交互

我在写一个搜索功能，想用 Ctrl+K 触发聚焦到搜索框，但加了键盘事件监听后没反应，不知道是不是哪里写错了。

试过在 useEffect 里加 window.addEventListener，也试过直接在组件里绑定，但快捷键就是不触发。是不是组合键要特殊处理？

useEffect(() => {
  const handleKeyDown = (e) => {
    if (e.ctrlKey && e.key === 'k') {
      searchInputRef.current?.focus();
    }
  };
  window.addEventListener('keydown', handleKeyDown);
  return () => window.removeEventListener('keydown', handleKeyDown);
}, []);

键盘交互

我来解答赞 6 收藏

反馈

1 条解答

Good“篷璐 Lv1

你这代码本身没问题，问题大概率是浏览器拦截了 Ctrl+K（比如 Chrome 里这个组合键会被搜索框占用），或者你的组件没挂载好。直接这样改：用 keydown 事件里加 e.preventDefault() 阻止默认行为，并确保监听在 window 上（别用 document 或某个子元素），再检查下是不是有其他库也占用了这个快捷键：

useEffect(() => {

  const handleKeyDown = (e) => {

    if (e.ctrlKey && e.key === 'k') {

      e.preventDefault();

      searchInputRef.current?.focus();

    }

  };

  window.addEventListener('keydown', handleKeyDown);

  return () => window.removeEventListener('keydown', handleKeyDown);

}, []);

2026-02-26 10:00