Svelte中使用use:enhance提交表单时如何阻止表单重置？

是的，你可以通过自定义 use:enhance 的回调函数阻止表单重置行为。默认情况下，use:enhance 会在提交完成后自动重置表单，即便它会执行 invalidateAll 更新页面数据——这会导致表单短暂变为空白，直到新数据加载完成。

具体实现方法 #

在表单上使用 use:enhance 时传入自定义处理函数，覆盖默认的表单重置逻辑，同时保留数据刷新功能：

<script>
  import { enhance } from '$app/forms';
  import { invalidateAll } from '$app/navigation';

  const handleEnhance = ({ form, fetch }) => {
    return async ({ update }) => {
      // 执行表单提交请求
      const response = await fetch(form.action, {
        method: form.method,
        body: new FormData(form),
        headers: {
          'Accept': 'application/json'
        }
      });

      if (response.ok) {
        // 刷新页面数据，确保 $page.data.product 为最新值
        await invalidateAll();
      }

      // 让 SvelteKit 更新页面状态，但跳过默认的表单重置
      await update();
    };
  };
</script>

<form method="POST" use:enhance={handleEnhance}>
  <input type="text" name="name" value={$page.data.product.name} />
  <input type="number" name="price" value={$page.data.product.price} />
  <!-- 其他产品字段 -->
  <button type="submit">更新产品</button>
</form>

逻辑说明 #

• 默认的 use:enhance 会在提交完成后调用 form.reset()，导致表单清空。
• 自定义函数中手动处理了请求和数据刷新，但省略了表单重置步骤。
• 由于表单值绑定到 $page.data.product，invalidateAll 完成后页面数据更新，表单会自动渲染最新的产品信息，不会出现空白状态。

简洁写法 #

如果不需要自定义请求逻辑，仅需阻止重置，可直接拦截默认行为：

<script>
  import { enhance } from '$app/forms';
</script>

<form method="POST" use:enhance={() => ({ update }) => update()}>
  <!-- 表单内容 -->
</form>

该写法保留了 use:enhance 的默认数据刷新和页面更新逻辑，但跳过了表单重置步骤。

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