Formik 中的 resetForm

当使用 Formik 来处理表单数据时，我们需要提供一种重置表单的方式，以便用户可以轻松地清除所有已输入的内容。这是通过 Formik 提供的 resetForm 函数实现的。

resetForm 函数的用途

resetForm 函数的主要用途是重置表单的状态。当用户提交表单时，他们希望看到输入框中的已填内容已被清除，以便他们可以输入新的信息。resetForm 函数将删除表单中的所有值，并将其重置为其初始状态。

resetForm 函数的用法

使用 resetForm 函数非常简单。在 Formik 组件中，我们可以使用传入的 resetForm 属性获取该函数，然后将其调用即可。以下是示例代码：

import { Formik, Form, Field } from 'formik';

const App = () => (
  <Formik
    initialValues={{ name: '', email: '' }}
    onSubmit={(values, { resetForm }) => {
      // 提交表单后，清除所有已输入的值
      resetForm();
    }}
  >
    {({ values }) => (
      <Form>
        <Field name="name" />
        <Field name="email" />
        <button type="submit">提交</button>
      </Form>
    )}
  </Formik>
);

在上面的示例代码中，我们使用 onSubmit 属性指定了一个回调函数，该函数在用户提交表单时将被调用。当用户点击提交按钮时，我们调用 resetForm 函数，以清除所有已输入的值。

注意事项

需要注意的是，resetForm 函数只会重置表单的值，而不会重置表单的错误状态。如果您希望同时清除错误状态，请在调用 resetForm 函数时指定一个空对象：

<form onSubmit={(values, { resetForm }) => {
    // 提交表单后，清除所有已输入的值和错误
    resetForm({});
}}>

这将覆盖 Formik 内部存储的错误，从而清除所有的错误状态。