使用react-hotkeys-hook时同时按热键1/2后释放未触发预期累加

问题描述 #

应用中设置了热键1和2，分别用于累加计数器cnt1和cnt2。依次按下并释放两个热键时功能正常，但同时按下两者再同时释放时，仅其中一个计数器（如cnt2）会累加，另一个无反应。

原代码示例 #

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

export default function App() {
  const [cnt1, set1] = React.useState(0);
  const [cnt2, set2] = React.useState(0);

  useHotkeys('1', () => set1((v) => v + 1), { keyup: true });
  useHotkeys('2', () => set2((v) => v + 1), { keyup: true });

  return (
    <div>
      <div>{cnt1}</div>
      <div>{cnt2}</div>
    </div>
  );
}

问题原因 #

react-hotkeys-hook库在处理多个按键同时释放的keyup事件时，内部的事件匹配逻辑可能导致只有最后一个按键的回调被触发，无法同时响应多个热键的释放操作。

解决方案 #

改用原生的keyup事件监听，直接绑定到window对象上，确保每个按键的释放事件都能被独立捕获并处理：

import React from 'react';

export default function App() {
  const [cnt1, set1] = React.useState(0);
  const [cnt2, set2] = React.useState(0);

  React.useEffect(() => {
    const handleKeyUp = (event) => {
      switch (event.key) {
        case '1':
          set1(prev => prev + 1);
          break;
        case '2':
          set2(prev => prev + 1);
          break;
        default:
          break;
      }
    };

    window.addEventListener('keyup', handleKeyUp);
    return () => window.removeEventListener('keyup', handleKeyUp);
  }, []);

  return (
    <div>
      <div>{cnt1}</div>
      <div>{cnt2}</div>
    </div>
  );
}

这种方式绕过了库的事件处理逻辑，直接与浏览器原生事件交互，无论按键是否同时释放，每个keyup事件都会被单独处理，确保两个计数器都能正确累加。

内容的提问来源于stack exchange，提问作者Artur Carvalho