Question

以下是我的示例代码：

Class School extends React.Componenet {
  deleteStudent = () => {
    // Logic of delete student goes here.
  }
  openNewForm = () => {
    // Logic of new form goes here.
  }
  render() {
    return(
      <div>
         <div>
           /* Here goes my view part */
         </div>
         <div>
           <Button onClick={this.deleteStudent}/>
           <BUtton onClick={this.openNewForm}/>
         </div>
      </div>
    );
  }
}

我想在我的反应项目中添加键盘事件。假设如果我将从键盘上按下删除按钮，它将删除所选的学生。如果按'N＆＃39; N＆＃39;键然后它将执行打开的新表单事件。

Answer 1

您可以使用以下内容：

detectUserKey(event) {
    if (event.key === "Enter") {
       //do something
    }
    else {
       //do default
    }
}

在组件上你可以做类似的事情：

onKeyDown={e => this.detectUserKey(e)}
onKeyPress={e => this.detectUserKey(e)}

Answer 2

您可以尝试使用KeyboardEvents。使用keyboardEventHandler（如onKeyPress，onKeyDown，onKeyUp），您可以获得键盘中按下的键。在这里，

if (event.getNativeKeyCode() == KeyCodes.KEY_DELETE) {
//do your respective action
}

可以添加条件检查以了解按下了哪个键。

添加关键事件以反应项目

2 个答案: