在表单提交react js后重置formik表单

npm install formik

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

const initialValues = {
  name: '',
  email: '',
  password: ''
};

const validateForm = (values) => {
  const errors = {};

  if (!values.name) {
    errors.name = 'Required';
  }

  if (!values.email) {
    errors.email = 'Required';
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(values.email)) {
    errors.email = 'Invalid email address';
  }

  if (!values.password) {
    errors.password = 'Required';
  } else if (values.password.length < 6) {
    errors.password = 'Password must be at least 6 characters long';
  }

  return errors;
};

<Formik
  initialValues={initialValues}
  validate={validateForm}
  onSubmit={(values, { resetForm }) => {
    // 处理表单提交逻辑
    // ...

    // 重置表单
    resetForm();
  }}
>
  {({ isSubmitting }) => (
    <Form>
      <div>
        <label htmlFor="name">Name</label>
        <Field type="text" name="name" />
        <ErrorMessage name="name" component="div" />
      </div>

      <div>
        <label htmlFor="email">Email</label>
        <Field type="email" name="email" />
        <ErrorMessage name="email" component="div" />
      </div>

      <div>
        <label htmlFor="password">Password</label>
        <Field type="password" name="password" />
        <ErrorMessage name="password" component="div" />
      </div>

      <button type="submit" disabled={isSubmitting}>
        Submit
      </button>
    </Form>
  )}
</Formik>