React怎么绑定键盘事件

最新推荐文章于 2024-04-17 09:44:29 发布

I-T枭

最新推荐文章于 2024-04-17 09:44:29 发布

阅读量1.5k

点赞数 1

分类专栏： React

本文链接：https://blog.csdn.net/hahahhahahahha123456/article/details/103006607

版权

React 专栏收录该内容

74 篇文章 1 订阅

订阅专栏

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