Formik 表单提交后怎么清空字段？

卫红提问于 2026-03-02 00:55:18 阅读 16

交互

我用 Formik 做了个表单，提交成功后想自动清空所有输入框，但试了 resetForm 没生效，是我调用方式不对吗？

我在 onSubmit 里这样写的：

onSubmit: (values, { resetForm }) => {
  submitData(values);
  resetForm();
}

但页面上的 input 还是保留着之前的值，控制台也没报错，有点懵……

我来解答赞 28 收藏

反馈

1 条解答

令狐子寨 Lv1

哎这个问题我之前也踩过坑！

你的代码看起来没问题，但问题很可能出在 submitData 是个异步操作。你现在的写法是同步调用的，resetForm() 可能在数据还没提交完成时就执行了，或者被某些状态更新覆盖掉了。

我的做法是确保在提交成功后再清空，改成这样：

onSubmit: async (values, { resetForm }) => {

  try {

    await submitData(values);

    resetForm();

  } catch (error) {

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

  }

}

如果你的 submitData 没有返回 Promise，那就手动包一下：

onSubmit: (values, { resetForm }) => {

  submitData(values)

    .then(() => {

      resetForm();

    })

    .catch(err => {

      console.error(err);

    });

}

还有一种情况，如果你给 Formik 设置了 initialValues 并且开启了 enableReinitialize，那 resetForm() 会重置到初始值而不是清空。如果想清空成空白表单，可以传个空对象进去：

resetForm({

  values: { name: '', email: '' } // 你的字段初始值

});

你先试试第一种异步的写法，大概率能解决。还不行的话再看看是不是 enableReinitialize 搞的鬼。

2026-03-02 01:01