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

Question

我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 实现此功能？

Answer 1

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

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>