react添加键盘事件（react-hook 监听键盘事件）

需求：

通过键盘的左右箭头按钮触发修改方框的位置

实现

• 基础数据

import React, { useState, useEffect } from 'react';
const ChangeBoxPosition: React.FC = (params: any) => {
	const [currentPosition,setCurrentPosition] = useState(0)
	return(
		<>
		<div style={{width:'100px',height:'100px',border:'1px solid red',marginLeft:`${currentPosition}px`}}></div>
		</>
	)
}
export default ChangeBoxPosition

• 添加全局键盘事件

  useEffect(() => {
    window.addEventListener('keydown', onKeyDown); // 添加全局事件
    return () => {
      window.removeEventListener('keydown', onKeyDown); // 销毁
    };
  }, [currentPosition]);

• 鼠标事件调用

// 键盘事件
  const onKeyDown = (e) => {
    // console.log(e.keyCode);
    switch (e.keyCode) {
      case 37: // 向左事件 - 位置减减
      	if(currentPosition-10>=0){
      		setCurrentPosition(currentPosition-10);
      	} 
        break;
      case 39: // 向右事件 - 位置加加
		setCurrentPosition(currentPosition+10);
        break;
    }
  };

注意事项

• react里面添加浏览器的原生事件，state数据只能获取到初始化的数据，所以添加全局方法一定要在数据变化基础上添加！！！即useEffect(()=>{},['需要依赖的state'])
• 添加完全局方法，还需要清除该方法，可以通过useEffect的返回函数进行清楚Ï