react js Formik <Form/> resetForm()不工作_react-redux-firebase不工作的react-hook-form_当onSubmit调用时，react-hook-form不工作 - 腾讯云开发者社区

react js Formik <Form/> resetForm()不工作

基础概念

React 是一个用于构建用户界面的 JavaScript 库，而 Formik 是一个用于简化 React 表单处理的库。<Form/> 是 Formik 提供的一个组件，用于包裹表单元素。resetForm() 是 Formik 提供的一个方法，用于重置表单的值到初始状态。

类型

Formik 提供了多种类型的表单组件和辅助函数，包括：

<Field/>：用于绑定表单字段。
<ErrorMessage/>：用于显示验证错误信息。
useField() 和 useForm()：用于自定义 Hook 形式的表单处理。

应用场景

Formik 适用于任何需要处理复杂表单的 React 应用，例如：

登录/注册页面
数据编辑页面
搜索表单
多步骤表单

问题及解决方案

问题：`resetForm()` 不工作

resetForm() 方法不工作的原因可能有以下几种：

方法调用时机不对：确保 resetForm() 在表单提交成功后调用。
Formik 上下文问题：确保 resetForm() 在 Formik 的上下文中调用。
组件卸载：如果组件在表单提交后卸载，resetForm() 可能不会生效。

解决方案

以下是一个示例代码，展示如何在 Formik 表单中正确使用 resetForm()：

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

const SignupSchema = Yup.object().shape({
  firstName: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  lastName: Yup.string()
    .min(2, 'Too Short!')
    .max(50, 'Too Long!')
    .required('Required'),
  email: Yup.string().email('Invalid email').required('Required'),
  password: Yup.string()
    .min(6, 'Password must be at least 6 characters!')
    .required('Required'),
});

const MyForm = () => (
  <Formik
    initialValues={{
      firstName: '',
      lastName: '',
      email: '',
      password: '',
    }}
    validationSchema={SignupSchema}
    onSubmit={(values, { setSubmitting, resetForm }) => {
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
        resetForm();
        setSubmitting(false);
      }, 400);
    }}
  >
    {({ isSubmitting }) => (
      <Form>
        <Field type="text" name="firstName" />
        <ErrorMessage name="firstName" component="div" />
        <Field type="text" name="lastName" />
        <ErrorMessage name="lastName" component="div" />
        <Field type="email" name="email" />
        <ErrorMessage name="email" component="div" />
        <Field type="password" name="password" />
        <ErrorMessage name="password" component="div" />
        <button type="submit" disabled={isSubmitting}>
          Submit
        </button>
      </Form>
    )}
  </Formik>
);

export default MyForm;