react 中绑定键盘事件

方法一

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

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

方法二

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 等获取是不是用了组合键

本文转自:http://react-china.org/t/react/27050

posted @ 2020-12-02 21:18  公瑾当年  阅读(3127)  评论(0编辑  收藏  举报