react中回车enter事件处理
Posted piaobodewu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react中回车enter事件处理相关的知识,希望对你有一定的参考价值。
对于常见的搜索需求业务场景,用户输入完成后,点击enter事件请求数据,要求不提交页面,实现数据局部更新,这需要用到react中的表单Forms。
处理方法:
(1)html书写
form标签中去掉action参数,定义onSubmit方法,如下所示:
<div className="mc2">
<form onSubmit={(e) => this.getSearchData(e,this.state.searchkey)}>
<b></b>
<input name="searchkey" type="text" className="search" placeholder="请输入关键字" value={this.state.searchkey} onChange={(e) => this.change(e.target.name,e.target.value)}/>
</form>
</div>
(2)事件处理
关键的是阻止掉页面默认提交:
getSearchData(event,name) {
//ajax处理
event.preventDefault();//阻止页面提交刷新<br>}
连接:
http://www.cnblogs.com/sunLemon/p/9089911.html
https://www.imooc.com/learn/1012
以上是关于react中回车enter事件处理的主要内容,如果未能解决你的问题,请参考以下文章