react中回车enter事件处理

发布时间：2020-12-15 20:39:15 所属栏目：百科来源：网络整理

导读：对于常见的搜索需求业务场景，用户输入完成后，点击enter事件请求数据，要求不提交页面，实现数据局部更新，这需要用到react中的表单Forms。处理方法：（1）html书写 form标签中去掉action参数，定义onSubmit方法，如下所示： div className= " mc2 " form

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!