SvelteKit增强表单提交成功后能否避免重置？

默认情况下，使用use:enhance的表单在提交成功后会自动重置，这是SvelteKit内置的默认行为。要避免这种情况，你可以给use:enhance传递自定义回调函数，拦截成功后的默认操作：

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

  function handleFormEnhance({ update }) {
    return async ({ result }) => {
      if (result.type === 'success') {
        // 这里不调用默认的update()，表单就不会被重置
        // 你可以在这里添加成功后的自定义逻辑，比如提示提交成功
      } else {
        // 非成功场景（比如验证失败）仍执行默认更新逻辑
        await update();
      }
    };
  }
</script>

<form method="POST" use:enhance={handleFormEnhance}>
  <input name="name" placeholder="输入名称" />
  <button type="submit">提交</button>
</form>

原理说明 #

use:enhance的默认成功处理会调用update()函数，这个函数会重置表单并同步页面数据。如果我们在提交成功时跳过调用update()，就能保留表单里的输入内容。

如果需要在成功后更新页面其他数据（比如展示最新的提交列表），但又不想重置表单，可以手动触发页面数据刷新：

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

  function handleFormEnhance({ update }) {
    return async ({ result }) => {
      if (result.type === 'success') {
        // 手动刷新页面数据，不重置表单
        await page.load();
        // 添加自定义提示
        alert('提交成功！');
      } else {
        await update();
      }
    };
  }
</script>

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