在 React 中实现组合键操作的三种方法

在 React 中实现组合键可以使用以下方式:

1. 使用 KeyboardEvent.getModifierState() 方法:

import React, { useState, useCallback } from 'react';

const MyComponent = () => {
  const [isCtrlShiftPressed, setIsCtrlShiftPressed] = useState(false);

  const handleKeyDown = useCallback((event) => {
    if (event.getModifierState('Control') && event.getModifierState('Shift')) {
      setIsCtrlShiftPressed(true);
    }
  }, []);

  const handleKeyUp = useCallback((event) => {
    if (!event.getModifierState('Control') || !event.getModifierState('Shift')) {
      setIsCtrlShiftPressed(false);
    }
  }, []);

  return (
    <div
      onKeyDown={handleKeyDown}
      onKeyUp={handleKeyUp}
      tabIndex={0} // 需要给组件一个 tabIndex 属性来使其可以接收键盘事件
    >
      {isCtrlShiftPressed ? 'Ctrl + Shift is pressed' : 'Ctrl + Shift is not pressed'}
    </div>
  );
};

export default MyComponent;

2. 使用 Mousetrap 库:

import React, { useEffect } from 'react';
import Mousetrap from 'mousetrap';

const MyComponent = () => {
  useEffect(() => {
    Mousetrap.bind('ctrl+shift+a', () => {
      console.log('Ctrl + Shift + A pressed');
    });

    return () => {
      Mousetrap.unbind('ctrl+shift+a');
    };
  }, []);

  return (
    <div>
      <p>Press Ctrl + Shift + A</p>
    </div>
  );
};

export default MyComponent;

3. 使用 ref 和原生事件处理:

import React, { useRef, useCallback } from 'react';

const MyComponent = () => {
  const divRef = useRef(null);

  const handleKeyDown = useCallback((event) => {
    if (event.ctrlKey && event.shiftKey && event.key === 'a') {
      console.log('Ctrl + Shift + A pressed');
    }
  }, []);

  return (
    <div
      ref={divRef}
      onKeyDown={handleKeyDown}
      tabIndex={0} // 需要给组件一个 tabIndex 属性来使其可以接收键盘事件
    >
      <p>Press Ctrl + Shift + A</p>
    </div>
  );
};

export default MyComponent;