当前位置：首页 > React

react如何写快捷键

2026-01-25 17:34:07React

监听键盘事件

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

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.ctrlKey && event.key === 's') {
        event.preventDefault();
        console.log('Ctrl+S pressed');
      }
    };

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

  return <div>Press Ctrl+S to trigger shortcut</div>;
}

使用第三方库

为了简化快捷键的实现，可以使用第三方库如react-hotkeys-hook或mousetrap。以下是使用react-hotkeys-hook的示例：

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

function App() {
  useHotkeys('ctrl+s', () => {
    console.log('Ctrl+S pressed');
  });

  return <div>Press Ctrl+S to trigger shortcut</div>;
}

组合键处理

处理组合键（如Ctrl+Shift+S）时，可以在事件监听中检查多个修饰键的状态。

useEffect(() => {
  const handleKeyDown = (event) => {
    if (event.ctrlKey && event.shiftKey && event.key === 'S') {
      event.preventDefault();
      console.log('Ctrl+Shift+S pressed');
    }
  };

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

避免事件冲突

在表单元素中输入时，可能需要避免快捷键与默认行为冲突。可以通过检查事件目标是否为输入元素来实现。

useEffect(() => {
  const handleKeyDown = (event) => {
    if (event.target.tagName === 'INPUT') return;
    if (event.ctrlKey && event.key === 's') {
      event.preventDefault();
      console.log('Ctrl+S pressed outside input');
    }
  };

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

动态快捷键

根据组件状态动态启用或禁用快捷键，可以在useEffect依赖数组中传入状态变量。

react如何写快捷键

const [isEnabled, setIsEnabled] = useState(true);

useEffect(() => {
  if (!isEnabled) return;

  const handleKeyDown = (event) => {
    if (event.ctrlKey && event.key === 's') {
      event.preventDefault();
      console.log('Ctrl+S pressed');
    }
  };

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