在react里实现点击回车键执行事件

最新推荐文章于 2024-05-15 16:26:07 发布

夏末_前端有意思

最新推荐文章于 2024-05-15 16:26:07 发布

阅读量1.9w

点赞数 6

分类专栏： react 文章标签：回车键 react

本文链接：https://blog.csdn.net/xiamocsdn/article/details/98972369

版权

react 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在网页应用里，我们搜索、提交账户名密码等等操作的过程中，不太经常会去一个个用鼠标点击提交或者执行某个按钮类型的操作。对于我个人而言，直接用回车键就很顺手了，鼠标还要去定位，很麻烦。
这几天在搭建一个前后端交互应用app的，最后完善项目一些细节的时候想要加上这个小小的便捷操作功能。
项目是用react+antd-mobile搭建的。如果是用JavaScript代码实现的话，直接在body标签里绑定onKeyDown事件，点击该事件，判断keyCode是不是等于13 - -13代表对回车键的监听。如果是，执行点击事件。代码如下：

<body onKeyDown="onkeydown()">
    <button onclick="handleClick()" value="click" />
<script>
function handleClick(){
    alert('点击了一下按钮')
}

 function onkeydown(){
 if(window.event.keyCode === 13){
            handleClick();
             }
        }
</script>
</body>

如果是在react当中，需要在按钮上绑定一个onClick事件和一个onkeyDown事件，逻辑是一样的。不同的是要在生命周期函数componentDidUpdate()中绑定一下监听。代码：

//render()内部
componentDidUpdate(){
		document.addEventListener('keydown',this.onkeydown);
	}

handleSend = ()=>{ 
//要执行的代码
	}

onkeydown = (e)=>{
		if (e.keyCode === 13) {
			this.handleSend()
		}
	}

  //这里的InputItem是antd-mobile里的一个输入框组件
<InputItem  
            ...//省略一些无关的代码
extra={
<span onClick={this.handleSend}  onKeyDown={(e)=>this.onkeydown(e)}>发送</span>
} />

夏末_前端有意思

关注

6
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
在react里实现点击回车键执行事件

在网页应用里，我们搜索、提交账户名密码等等操作的过程中，不太经常会去一个个用鼠标点击提交或者执行某个按钮类型的操作。对于我个人而言，直接用回车键就很顺手了，鼠标还要去定位，很麻烦。这几天在搭建一个前后端交互应用app的，最后完善项目一些细节的时候想要加上这个小小的便捷操作功能。项目是用react+antd-mobile搭建的。如果是用JavaScript代码实现的话，直接在body标签里绑定o...
复制链接

扫一扫