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的返回函数进行清楚Ï

react添加键盘事件（react-hook 监听键盘事件）相关推荐

java键盘监听事件代码_JavaScript监听键盘事件代码实现
在写网页的时候,常常需要监听键盘事件,让我们来看看如何实现吧. 监听方式键盘事件往往是全局监听,设监听的函数为keyboard(). keyup事件类型.该类型触发条件为按键按下去并松开. //长按 ...
jquery实现上下左右键盘监听_jQuery监听键盘事件及相关操作使用
一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() keyup事件会在按键释放时触发,也就是你按下键盘起来后的事件 3.keypress() k ...
vue 匹配键盘输入_vue如何监听键盘事件中的按键？
poj1966 求顶点连通度 Cable TV Network Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 4563 ...
html键盘事件监听,react怎样监听键盘事件
react监听键盘事件的方法:React中有监听键盘按下事件onKeyUp或者onKeyDown属性(以下用onKeyUp),值为自定义方法keyUp,即onKeyUp={this.keyUp}. 通 ...
ExtJS监听键盘事件：回车键实现登录功能
ExtJS为我们封装了完整的键盘监听事件,我们只要调用相应的接口就能完美的实现键盘监听.在所有的键盘事件中,按回车键提交表单,实现登录的功能是我们最常用到的键盘监听事件,下面李坏给出一个实现回车键提 ...
Vue中监听键盘事件
Vue中监听键盘事件在一些搜索框中,我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作.在原生js或者jQuery中,我们需要判断e.keyCode的值来获取 ...
[vue] vue如何监听键盘事件？
[vue] vue如何监听键盘事件? 那要看你怎么监听了, 比如 @keyup.enter, 或者直接全局监听个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家 ...
javascript监听键盘事件 - 如表单enter回车提交
javascript监听键盘点击时间,比如:enter回车表单提交.禁止F5刷新.禁用鼠标右键等等本文仅简单做个介绍,权当抛砖引玉了:如果朋友们有更好的建议或者意见,欢迎留言评论. 代码如下: &l ...
Vue中监听键盘事件及自定义键盘事件
在一些搜索框中,我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作.在原生js或者jQuery中,我们需要判断e.keyCode的值来获取用户所按的键.这样就存 ...

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

需求：

实现

注意事项

react添加键盘事件（react-hook 监听键盘事件）相关推荐

最新文章

热门文章