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