React应用input表单OnKeyDown事件中如何区分ArrowUp与Ctrl+ArrowUp组合键

问题根因 #

你当前的两个if判断为并行执行逻辑，按下Ctrl + ArrowUp时e.key === "ArrowUp"的条件本身成立，因此会先命中单独ArrowUp的判断分支，再命中组合键分支，自然出现逻辑冲突。

解决方案 #

调整判断逻辑满足两个规则即可：

• 优先判断带修饰键的组合键场景，命中后直接终止函数执行，避免落入后续判断
• 单独按键的场景新增「无对应修饰键按下」的判断，排除组合键场景

修正后的代码如下：

// 表单组件
<input onKeyDown={keyHandler}/>

// 按键处理逻辑
const keyHandler = (e) => {
  // 优先匹配组合键逻辑
  if (e.key === 'ArrowUp' && e.ctrlKey) {
    // 此处写入Ctrl+ArrowUp对应的业务逻辑
    // e.preventDefault() // 若需要阻止浏览器默认行为可打开这行注释
    return
  }

  // 匹配单独按ArrowUp的逻辑：仅当key匹配且没有按下Ctrl时触发
  if (e.key === 'ArrowUp' && !e.ctrlKey) {
    // 此处写入单独ArrowUp对应的业务逻辑
    return
  }
}

如果需要更严格的单独触发规则（按下Shift/Alt/Command等其他修饰键时也不触发单独ArrowUp逻辑），可以把第二个判断的条件调整为：

if (e.key === 'ArrowUp' && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey)

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