添加关键事件以响应项目

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>
    );
  }
}

我想在我的 React 项目中添加键盘事件。假设如果我按下键盘上的删除按钮，那么它将删除所选学生。如果按下 'N' 键，那么它将执行打开新表单事件。

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

您可以为此尝试使用键盘事件。使用 keyboardEventHandler（如 onKeyPress、onKeyDown、onKeyUp），您可以获得键盘上按下的键。在这里，

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

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

添加关键事件以响应项目

Add key events to react Projects

keyboard-shortcuts

reactjs