React怎么绑定键盘事件

#1

使用的是 ant design pro 网页项目做出客户端效果,求大神告知下

#2

方法1，直接绑定在原生事件上，这个一般是用来捕捉编辑的时候的事件，用的不多

<textarea onKeyDown={e=> console.log( e.keyCode ) } />

方法2，通过声明周期直接绑定到document的事件上，这个方式一般用来做快捷键比较多

export class KeyBind extends React.Component {
  componentDidMount(){
    document.addEventListener("keydown", this.onKeyDown)
  }

  componentWillUnmount(){
    document.removeEventListener("keydown", this.onKeyDown)
  }

  onKeyDown = (e) => {
    switch( e.keyCode) {
      case 13://回车事件
        break
    }
  }
}

事件有三种 onKeyPress onKeyDown onKeyUp 根据需要使用, 还能通过
e. ctrlKey
e.metaKey
e.shiftKey
等获取是不是用了组合键

1 Like
#3

感谢大佬的热情帮助