react中如何监听全局键盘事件，并在组件销毁时，解除监听事件

react中如何监听全局键盘事件，并在组件销毁时，解除监听事件

由于我们需要监听的是全局的键盘事件，不能对某个特定的dom元素绑定键盘事件，我们只能在全局监听键盘事件：​​document.addEventListener("keyup", fun, false)​​。

键盘事件有：​​keydown​​ 、 ​​keyup​​ 、​keypress​

简单讲一下键盘事件有哪些：

keydown : 键盘被按下，如果一直按着键盘的按键，则keydown事件会一直被触发。

keyup : 释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。

keypress ：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符）

​

描述一下我遇到的场景：进入一个弹窗页面，按下Esc按钮可以退出，<— 和 —>可以切换内容。

正如我上面所讲的，我只能在全局中绑定一个监听事件，并在组件销毁时，解除监听事件。那我们必须会用到useEffect，一进来时绑定，然后销毁时return掉。

代码如下：

useEffect(() =>{
    //监听键盘事件
    document.addEventListener("keyup", PopupKeyUp, false)
    return ()=>{
         //销毁键盘事件
      document.removeEventListener("keyup", PopupKeyUp, false)
    }
  })

//键盘事件函数
  const PopupKeyUp = (e)=>{
    if (e.code === "Escape") {
      onclose()
    }
    if (e.code === "ArrowLeft") {
      LeftSwitchFile()
    }
    if (e.code === "ArrowRight") {
      RightSwitchFile()
    }
  }

附：

键盘事件定义的属性

属性	说明
keyCode	该属性包含键盘中对应键位的键值
charCode	该属性包含键盘中对应键位的 Unicode 编码，仅 DOM 支持
target	发生事件的节点（包含元素），仅 DOM 支持
srcElement	发生事件的元素，仅 IE 支持
shiftKey	是否按下 Shift 键，如果按下返回 true，否则为false
ctrlKey	是否按下 Ctrl 键，如果按下返回 true，否则为false
altKey	是否按下 Alt 键，如果按下返回 true，否则为false
metaKey	是否按下 Mtea 键，如果按下返回 true，否则为false，仅 DOM 支持

如果你使用的组合键，例如：ctrl+c

document.onkeyup=function(e){
  //按下ctrl+c
  if(e.ctrlKey && e.keyCode ===67 ){
      
  }
}