【菜鳥搭建react項目之路14】【html】form點擊button按鈕會自動刷新頁面&&阻止form表單刷新頁面的方法

現象：

今天在寫react的時候發現一個奇怪的現象，每次我點擊按鈕之后，數據會更新，接着頁面也刷新了，導致我更新的數據回到初始化狀態（因為data數據存在state里面，所以頁面刷新，data也會重新初始化）。

原因：

button寫在form表單里面，form表單提交會默認刷新頁面。

<form>
...
<button onClick={this.updateData}></button>
</form>

 

解決辦法：

① 監聽form表單的submit事件，在onSubmit方法里禁止頁面刷新行為

<form onSubmit={this.prohibitRefresh}>
...
<button onClick={this.updateData}></button>
</form>

prohibitRefresh = (e) => {
    e.preventDefault() || (e.returnValue = false);  // 阻止表單默認行為
};

 

② 改變button的type

form表單下的按鈕在沒指定type類型的時候默認是type = 'submit'

設置button的 type = 'button' ，就不會自動提交表單了，自動刷新的問題解決。

<button type="button" onClick={this.updateData}></button>