React应用中preventDefault()方法失效导致表单提交页面刷新的解决咨询

嘿，我一眼就揪出问题所在啦！你在表单的onSubmit绑定里用了箭头函数，但没把提交事件对象e传递给处理函数，这就导致handleHeaderValueUpdate里的e.preventDefault()根本拿不到有效的事件对象，自然没法阻止页面刷新。

具体修改步骤： #

只需要调整表单的onSubmit属性，把事件对象e一起传递给处理函数就行：

// 原来有问题的代码
<form onSubmit={()=>handleHeaderValueUpdate(headerId)} className="dashboard-form">

// 修改后的正确代码
<form onSubmit={(e)=>handleHeaderValueUpdate(headerId, e)} className="dashboard-form">

为什么这样改就有效？ #

当表单触发submit事件时，浏览器会自动生成一个事件对象并传递给处理函数。但你之前用箭头函数包裹时，没有把这个e传递给handleHeaderValueUpdate，导致函数里的e是undefined，调用e.preventDefault()自然起不到任何作用。

另外检查了你的提交按钮，type="submit"的设置是正确的，这部分没问题。

修改后再测试，页面应该就不会刷新了，你的异步提交逻辑也能正常执行啦。

内容的提问来源于stack exchange，提问作者kinhs