React怎么绑定键盘事件

「爱情、让人受尽委屈。」 2023-05-30 15:56 71阅读 0赞

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

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

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

  1. export class KeyBind extends React.Component {
  2.   componentDidMount(){
  3.     document.addEventListener("keydown", this.onKeyDown)
  4.   }
  6.   componentWillUnmount(){
  7.     document.removeEventListener("keydown", this.onKeyDown)
  8.   }
  10.   onKeyDown = (e) => {
  11.     switch( e.keyCode) {
  12.       case 13://回车事件
  13.         break
  14.     }
  15.   }
  16. }

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

发表评论

表情：
评论列表 （有 0 条评论，71人围观）

还没有评论，来说两句吧...

相关阅读

    相关 React 项目--button 绑定事件（15）

    不知不觉中写博客已经成为了一种习惯，不仅仅是一种学习知识吧，也是一种清楚自己学习了那些的内容。在前面的博客中我们慢慢的介绍了一些react基本的语法，现在我们继续来react按

    女爷i女爷i/ 0 赞/ 264 阅读

    相关 react+ES6(事件绑定)

    最近一直在看react。之前看react的时候很多都是旧的写法（es5），这几天因项目要求把es6和react一起结合看了一下，自己也写了几个demo，想把这些demo拿出来分

    以你之姓@以你之姓@/ 0 赞/ 367 阅读