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

程序员文章站 2022-07-08 10:27:30

...

在网页应用里，我们搜索、提交账户名密码等等操作的过程中，不太经常会去一个个用鼠标点击提交或者执行某个按钮类型的操作。对于我个人而言，直接用回车键就很顺手了，鼠标还要去定位，很麻烦。
这几天在搭建一个前后端交互应用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事件，逻辑是一样的。不同的是要在表示组件已经挂载完毕的生命周期函数componentDidMount()中绑定一下监听。代码：

//render()内部
componentDidMount(){
		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>
} />