当前位置：首页 > React

react实现快捷键

2026-01-27 15:58:56React

监听键盘事件

在React中实现快捷键功能，可以通过监听键盘事件来完成。使用useEffect钩子来添加和移除事件监听器，确保组件卸载时清理事件。

import { useEffect } from 'react';

function useKeyboardShortcut(key, callback) {
  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === key) {
        callback();
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [key, callback]);
}

组合键支持

如果需要支持组合键（如Ctrl + S），可以检查event.ctrlKey、event.shiftKey或event.metaKey等属性。

function useKeyboardShortcut(key, callback, ctrlKey = false) {
  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === key && (!ctrlKey || event.ctrlKey)) {
        callback();
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [key, callback, ctrlKey]);
}

使用第三方库

对于更复杂的快捷键需求，可以使用第三方库如react-hotkeys或mousetrap。这些库提供了更高级的功能，例如快捷键冲突解决和全局快捷键注册。

import { useHotkeys } from 'react-hotkeys-hook';

function MyComponent() {
  useHotkeys('ctrl+s', () => {
    console.log('Save triggered');
  });
  return <div>Press Ctrl+S to save</div>;
}

自定义快捷键组件

创建一个可复用的快捷键组件，封装事件监听逻辑，方便在多个地方使用。

function KeyboardShortcut({ keys, onTrigger }) {
  useEffect(() => {
    const handleKeyDown = (event) => {
      if (keys.includes(event.key) && event.ctrlKey) {
        onTrigger();
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [keys, onTrigger]);

  return null;
}

避免事件冒泡

在某些情况下，可能需要阻止快捷键事件的默认行为或冒泡。可以通过调用event.preventDefault()或event.stopPropagation()来实现。

function useKeyboardShortcut(key, callback) {
  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === key) {
        event.preventDefault();
        callback();
      }
    };

    document.addEventListener('keydown', handleKeyDown);
    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, [key, callback]);
}

react实现快捷键