對於常見的搜索需求業務場景,用戶輸入完成後,點擊enter事件請求數據,要求不提交頁面,實現數據局部更新,這需要用到react中的表單Forms。 處理方法: (1)html書寫 form標簽中去掉action參數,定義onSubmit方法,如下所示: (2)事件處理 關鍵的是阻止掉頁面預設提交: ...
對於常見的搜索需求業務場景,用戶輸入完成後,點擊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();//阻止頁面提交刷新
}