Formik的resetForm方法无法正常工作

问题描述

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

这是一个简单的用例：

1. 用户加载一个表单（带有两个字段“ email”和“ address”，以及初始值： 电子邮件：“ [e-mail]”， 地址：“栏”

2. 用户开始编辑电子邮件字段。但随后他决定取消所做的更改并 还原为初始值（表示“ foo @ gmail”，“ bar”）。

const MyForm = () => (
 <Formik initialValues={{ email:"[e-mail]",address: "bar" })>
   ...
 </Formik>
)

我使用resetForm。但这并不会将我的表单恢复为初始值

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

如何使用Formik实现此功能？

解决方法

我会通过将原始初始值保留为可重用变量来实现这一目标

const initialValues= { email: '[e-mail]' }

<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>