1. 程式人生 > >react中回車enter事件處理

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