Final Form 表单提交后无法重置字段值是怎么回事？

子轩 ☘︎ 提问于 2026-03-26 23:32:23 阅读 21

交互

我用 Final Form 做了个简单的登录表单，提交成功后调用了 form.reset()，但输入框里的内容没清空，还是显示之前填的值，这是为啥？

我试过在 onSubmit 里直接调 reset，也试过用 mutators，都不行。控制台也没报错，就是 UI 没变。

<form onSubmit={handleSubmit}>
  <input {...fields.email.input} placeholder="邮箱" />
  <input {...fields.password.input} type="password" placeholder="密码" />
  <button type="submit">登录</button>
</form>

我来解答赞 2 收藏

反馈

1 条解答

司马舒昕 Lv1

看起来问题出在你调用 reset 的时机上。官方文档里说，reset 需要在表单提交完成后正确执行才行。你的代码可能是在 onSubmit 里直接调用了 reset，但这时表单状态还没完全更新。

试试把 reset 放到 form.submit() 的 then 里面执行，这样能确保表单完成整个提交流程后再重置：



const handleSubmit = async (values) => {

  try {

    await form.submit();

    form.reset(); // 在这里重置

  } catch (error) {

    console.error('提交失败', error);

  }

};

另外记得检查你的输入组件是不是正确连接了 form 状态。我之前也踩过这个坑，有时候表单重置了但 UI 没更新，就是因为组件没监听到状态变化。

如果还不行，看看 final-form 是否有版本兼容问题，有时候新版的 API 跟旧版不太一样。最后还是建议对照下官方文档的相关章节，那上面有完整的例子可以参考。

2026-03-27 01:08