【菜鸟搭建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>