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

在表单提交React JS后重置Formik表单，可以通过以下步骤实现：

首先，确保你已经安装了Formik库。你可以使用以下命令进行安装：

npm install formik

在你的React组件中，导入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和validate属性：

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

在上述代码中，当表单提交时，通过onSubmit回调函数处理表单提交逻辑，并在处理完逻辑后调用resetForm函数重置表单。

这样，当用户点击提交按钮时，表单将被提交并重置为初始状态，清空所有输入字段的值。

关于Formik的更多信息和使用方法，你可以参考腾讯云的Formik产品介绍链接地址：Formik产品介绍