为何要在React异步表单提交函数开头调用e.preventDefault()？

首先明确核心：e.preventDefault()是浏览器原生API，和React、async函数本身没有直接绑定，但在React表单场景中必须这么用，尤其是搭配async处理逻辑时，原因主要有这几点：

1. 阻止浏览器的默认表单提交行为 #

浏览器原生表单提交的默认行为是：点击提交按钮后，立刻刷新页面（或跳转到表单action属性指定的URL）。这在传统多页应用里没问题，但React是单页应用，我们需要自己处理表单数据（比如发送API请求、更新组件状态），而不是让浏览器强制刷新页面——刷新会重置整个React应用的状态，丢失当前页面的所有数据和交互上下文。

2. 必须放在async函数开头的原因 #

async函数里会包含异步操作（比如await fetch），这些操作是异步执行的，而浏览器的默认提交行为是同步触发的。如果不先调用e.preventDefault()，哪怕你后面写了异步逻辑，浏览器会在async代码执行的同时（甚至更早）触发页面刷新，导致你的异步请求还没完成、状态还没更新，页面就已经重置了，所有后续逻辑都会被中断。

举个典型场景：

const handleSubmit = async (e) => {
  e.preventDefault(); // 先阻止默认行为，再执行异步逻辑
  try {
    await fetch('/api/submit-form', {
      method: 'POST',
      body: JSON.stringify(formData),
      headers: { 'Content-Type': 'application/json' }
    });
    // 提交成功后的状态更新
    setFormData({});
    setSubmitSuccess(true);
  } catch (err) {
    setSubmitError(err.message);
  }
};

// 表单组件
<form onSubmit={handleSubmit}>
  <input type="text" value={formData.name} onChange={(e) => setFormData({...formData, name: e.target.value})} />
  <button type="submit">提交</button>
</form>

如果去掉e.preventDefault()，点击提交后浏览器会立刻刷新页面，await fetch的请求可能还没发送完成，setFormData和setSubmitSuccess这些状态更新根本不会生效——因为页面刷新后，整个React组件会被重新初始化，之前的状态全部丢失。

3. 和React渲染机制的关联 #

React的渲染依赖组件状态和props的变化，页面刷新会直接销毁当前的React应用实例，重新挂载根组件，这意味着：

• 所有组件状态被重置
• 未完成的异步请求被中断
• 用户的输入数据全部丢失

所以阻止浏览器默认提交行为，本质是让React掌控表单提交后的整个流程，而不是交给浏览器的原生机制破坏单页应用的交互逻辑。

总结 #

• e.preventDefault()和async特性、React渲染机制的直接关联不大，但在React异步表单场景中，必须先调用它来阻止页面刷新，才能保证后续异步逻辑（API请求、状态更新）正常执行。
• 它阻止的是浏览器的默认刷新/跳转行为，而不是“阻止表单提交”——你在handleSubmit里写的逻辑才是自定义的表单提交流程。

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