react中回車enter事件處理
阿新 • • 發佈:2018-12-08
對於常見的搜尋需求業務場景,使用者輸入完成後,點選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