OnKeydown 事件中的按钮组合答案

【问题标题】：combination of buttons in event OnKeydownOnKeydown 事件中的按钮组合
【发布时间】：2021-11-11 18:34:52
【问题描述】：

我需要在我的 react 应用程序的输入表单中设置按钮组合。

"CTRL + "向上箭头"
“向上箭头”

我的代码是这样的。

//Form

<input onKeyDown={keyHandler}/>

//handler

const keyhandler = (e) => {

if(e.key === "ArrowUp") {//do something}

if(e.key === 'ArrowUp' && e.getModifierState("Control")) {//do another thing}

问题是当事件与组合触发时，首先“如果”也是如此。如何用 ctrl 按钮区分“ArrowUp”和“ArrowUp”？

我也这样尝试（但没有帮助）：


if(e.key === 'ArrowUp' && event.ctrlKey){ //do another thing}

【问题讨论】：

您是否尝试更改if-statements 的顺序？首先检查ctrl 按钮。这意味着：将第二个if-statement 移到第一个前面！

标签： javascript reactjs if-statement key keydown

【解决方案1】：

按照你的逻辑，

  if (Control is pressed) {
    if (ArrowUp is pressed) {
        // both are pressed
    }
  } else {
    if (ArrowUp is pressed) {
        // only arrow up is pressed
    }
  }

【讨论】：

【解决方案2】：

我用这个解决了我的问题。

if(!e.getModifierState('Control')){
 if(e.key == 'ArrowUp'){ 
  //single button action
  }
}
if(e.key == "ArrowUp" && e.getModifierState("Control")){
 //combo buttons action
}

【讨论】：