时间戳

首页 > 解决方案 > Formik 的 resetForm 方法没有按预期工作

reactjs - Formik 的 resetForm 方法没有按预期工作

问题描述

我Formik在我的应用程序中使用，我想取消对表单所做的更改并将其恢复为初始值（这与提交后清除表单无关，这是大多数教程和问题所涉及的）。

这是一个简单的用例：

  1. 用户加载一个表单（比如 2 个字段“电子邮件”和“地址”，以及初始值：电子邮件：“foo@gmail.com”，地址：“bar”

  2. 用户开始编辑电子邮件字段。但随后他决定取消所做的更改并恢复为初始值（意思是“foo@gmail”、“bar”）。

const MyForm = () => (
 <Formik initialValues={{ email:"foo@gmail.com", address: "bar" })>
   ...
 </Formik>
)

我使用resetForm. 但它不会将我的表单恢复为其初始值

 const ResetButtom = () => {
  const { resetForm } = useFormikContext();
  return (
   <Button onClick={() => resetForm()} {...} />
     Reset
   </Button>
  )
 }

如何使用 Formik 实现此功能？

标签： reactjsresetformik

解决方案

我会通过将原始初始值保留为可重用变量来解决此问题

const initialValues= { email: 'foo@email.com' }

<Formik initialValues={initialValues} ... />

接着：

<Button onClick={() => resetForm(initialValues)} {...} />
  Reset
</Button>

如果您使用 Formik v2：

<Button onClick={() => resetForm({ values: initialValues })} {...} />
  Reset
</Button>

或者，您可以setValues以类似的方式使用：

<Button onClick={() => setValues({ ...initialValues })} {...} />
  Reset
</Button>

推荐阅读