代码之家  ›  专栏  ›  技术社区  ›  Sourabh Banka

添加关键事件以响应项目

  •  1
  • Sourabh Banka  · 技术社区  · 7 年前

    以下是我的示例代码:

    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”键,则将执行“打开新表单事件”。

    2 回复  |  直到 7 年前
        1
  •  1
  •   Yash Thakur    7 年前

    您可以使用以下内容:

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

    在组件上,可以执行以下操作:

    onKeyDown={e => this.detectUserKey(e)}
    onKeyPress={e => this.detectUserKey(e)}
    
        2
  •  0
  •   Aishwarya Jeevarathinam    7 年前

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

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

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