
在 Inertia.js + Laravel 8 应用中,通过 form.reset() 无法清空表单残留值,根本原因在于 useForm 初始化时绑定了 props.defaultValues,导致 reset() 仅恢复至初始默认值而非真正清空;需先调用 form.defaults() 动态重置默认值,再执行 reset()。
在 inertia.js + laravel 8 应用中,通过 `form.reset()` 无法清空表单残留值,根本原因在于 `useform` 初始化时绑定了 `props.defaultvalues`,导致 `reset()` 仅恢复至初始默认值而非真正清空;需先调用 `form.defaults()` 动态重置默认值,再执行 `reset()`。
在使用 Inertia.js 构建多步骤表单流程(如“草稿创建 → 跳转编辑 → 删除后返回”)时,一个常见却易被忽视的问题是:表单值在页面跳转后意外残留。例如,用户从第二页点击删除并重定向回第一页时,原草稿数据仍显示在输入框中——即使已显式调用 form.reset() 或设置 preserveState: false,问题依然存在。
这并非 Inertia 缓存机制失灵,而是 useForm 的设计逻辑所致:form.reset() 不是“清空”,而是“重置为初始化时传入的默认值”。若你这样初始化表单:
const form = useForm({
value1: props.defaultValues.value1,
value2: props.defaultValues.value2,
value3: props.defaultValues.value3,
});那么无论调用多少次 form.reset(),它始终将字段恢复为 props.defaultValues 中的原始值(可能正是上一次提交的草稿内容),形成“假重置”。
✅ 正确解法是 两步操作:先动态更新 form.defaults(),将所有字段默认值设为 null(或空字符串、undefined 等语义化空值),再调用 reset() 触发实际重置:
const deleteDraft = () => {
if (confirm("确定删除草稿?")) {
Inertia.post(props.deleteDraftUrl, null, {
preserveState: false,
onSuccess: () => {
// ✅ 关键:重置默认值为 null
form.defaults({
value1: null,
value2: null,
value3: null,
});
// ✅ 再执行重置,此时将真正清空所有字段
form.reset();
},
});
}
};对于字段较多的场景,可借助 form.data() 动态遍历重置,默认值,避免硬编码:
onSuccess: () => {
// 自动为所有当前表单字段设置 null 默认值
Object.keys(form.data()).forEach(key => {
form.defaults(key, null);
});
form.reset();
},⚠️ 注意事项:
- preserveState: false 仅控制 Inertia 页面级状态缓存(如滚动位置、组件实例),不影响 useForm 内部状态,因此单独使用无效;
- remember: ["form"] 会持久化表单状态(如输入中的临时值),若无需跨刷新保留,请移除该配置;
- 若后端删除成功但未返回重定向响应(如返回 JSON { success: true }),Inertia 不会自动跳转,需手动调用 Inertia.visit() 或确保控制器返回 redirect()->back() / ->route();
- 建议在 onSuccess 中补充 UI 反馈(如 Toast 提示),提升用户体验。
总结:解决 Inertia 表单残留的核心在于理解 useForm 的“默认值驱动重置”机制。不要只依赖 reset(),而应主动管理 defaults() —— 这既是技术要点,也是 Inertia 响应式表单设计的最佳实践。










