react中回车enter事件处理

it2022-06-24  82

对于常见的搜索需求业务场景,用户输入完成后,点击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

转载于:https://www.cnblogs.com/piaobodewu/p/10086210.html


最新回复(0)