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

Question

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

这是一个简单的用例：

用户加载了一个表单（比如 2 个字段“email”和“address”，以及初始值：电子邮件：“foo@gmail.com”，地址：“酒吧”
用户开始编辑电子邮件字段。但后来他决定取消所做的更改并恢复为初始值（意思是“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>

Answer 2

的修改帮助我重置了初始值。

const genInitialValues = () => ({
  textField: "",
  customField: [],
});

  <Formik
    initialValues={genInitialValues()}
    onSubmit={(values, actions) => {
      ...
      actions.resetForm({ values: genInitialValues() });
    }
  ... />

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

The resetForm method of Formik does not work as expected

reset

reactjs

formik