React应用中键盘按键左右侧识别的优化实现方案问询

完全理解你的痛点——用一堆if枚举按键不仅代码冗余，维护起来也麻烦。针对你定义的「7、U、J、N竖线」分界规则，我们可以用集合（Set）存储左侧按键的方式来高效判断，既简洁又易维护。

核心思路 #

根据你的规则明确：

• 竖线左侧的按键 → 左侧输入
• 竖线（含7、U、J、N）及右侧的按键 → 右侧输入

我们把所有属于左侧区域的按键整理成一个Set（查找效率O(1)，比if判断快得多），然后在按键事件里直接判断当前按键是否在这个Set中即可。

代码实现 #

1. 定义左侧按键集合

// 统一转小写判断，集合里只存小写按键，避免重复维护大小写
const LEFT_KEYS = new Set([
  // 数字键：1-6在竖线左侧（7及右边属于右侧）
  '1', '2', '3', '4', '5', '6',
  // 字母第一行：Q-Y在左侧（U及右边属于右侧）
  'q', 'w', 'e', 'r', 't', 'y',
  // 字母第二行：A-G在左侧（J及右边属于右侧）
  'a', 's', 'd', 'f', 'g',
  // 字母第三行：Z-V在左侧（N及右边属于右侧）
  'z', 'x', 'c', 'v',
  // 可选：左侧功能键（如果需要支持左Shift、左Ctrl等）
  'shiftleft', 'controlleft', 'metaleft', 'altleft'
]);

2. 按键事件处理函数

在React的按键监听事件中，统一将按键转为小写后判断：

const handleKeyDown = (e) => {
  const pressedKey = e.key.toLowerCase();
  const isLeftInput = LEFT_KEYS.has(pressedKey);

  if (isLeftInput) {
    // 用户按下左侧按键，执行「左侧数字更大」的逻辑
    console.log('用户选择左侧数字');
    // 这里替换成你的业务逻辑，比如更新状态、校验结果等
  } else {
    // 用户按下右侧/分界线上的按键，执行「右侧数字更大」的逻辑
    console.log('用户选择右侧数字');
  }
};

// 在组件中绑定全局按键监听
useEffect(() => {
  window.addEventListener('keydown', handleKeyDown);
  return () => window.removeEventListener('keydown', handleKeyDown);
}, []);

方案优势 #

• 简洁易维护：如果后续需要调整分界规则，只需修改Set里的按键列表，不用动一堆if语句
• 高效：Set的has方法是O(1)时间复杂度，比多条件判断性能更好
• 灵活扩展：可以轻松添加/移除按键，比如要不要支持左侧功能键，只需在Set里增删即可

补充说明 #

如果你的场景需要支持数字小键盘，可以根据需求把小键盘的1-6等左侧按键补充到Set中（比如小键盘的1对应'num1'，需要确认对应e.key的值）。

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