React Formik注册表单提交按钮点击后无重置效果问题

开发了具备授权与验证功能的React Formik注册表单，为测试逻辑在onSubmit中添加了resetForm函数，但点击提交按钮后无任何反应，预期点击后重置所有输入框。

错误原因 #

Formik的onSubmit函数接收两个参数：第一个是表单的values对象，第二个是包含resetForm等方法的actions对象。你的代码错误地直接从第一个参数（values）中解构resetForm，导致resetForm为undefined，调用自然没有效果。

修复方案 #

修正onSubmit的参数解构方式，从第二个参数（actions）中获取resetForm：

onSubmit={(values, { resetForm }) => resetForm()}

另外，提交按钮的onClick={handleSubmit}可以保留，但Formik会自动监听表单内type="submit"的按钮，也可以移除该属性，让按钮默认触发提交逻辑。

修正后的完整代码 #

import { Button, TextField } from "@mui/material";
import * as yup from "yup";
import { Formik } from "formik";

export const RegistrationForm = () => {
  const validationSchema = yup.object().shape({
    name: yup
      .string()
      .typeError("Должно быть строкой")
      .required("Обязательно")
      .matches(/^[аА-яЯ\s]+$/, "Имя должно состоять из русских букв"),
    secondName: yup
      .string()
      .typeError("Должно быть строкой")
      .required("Обязательно")
      .matches(/^[аА-яЯ\s]+$/, "Фамилия должна состоять из русских букв"),
    login: yup
      .string()
      .typeError("Должно быть строкой")
      .required("Обязательно"),
    password: yup
      .string()
      .typeError("Должно быть строкой")
      .required("Обязательно"),
    confirmPassword: yup
      .string()
      .oneOf([yup.ref("password")], "Пароли не совпадают")
      .required("Обязательно"),
    email: yup.string().email("Введите верный email").required("Обязательно"),
    confirmEmail: yup
      .string()
      .email("Введите верный email")
      .oneOf([yup.ref("email")], "Email не совпадают")
      .required("Обязательно"),
  });

  return (
    <>
      <header>
        <div className="head-btns">
          <Button variant="outlined">Зарегистрироваться</Button>
          <Button variant="outlined">Авторизоваться</Button>
        </div>
      </header>
      <Formik
        initialValues={{
          name: "",
          secondName: "",
          login: "",
          password: "",
          confirmPassword: "",
          email: "",
          confirmEmail: "",
        }}
        validateOnBlur
        // 修正此处的参数解构
        onSubmit={(values, { resetForm }) => resetForm()}
        validationSchema={validationSchema}
      >
        {({
          values,
          errors,
          touched,
          handleChange,
          handleBlur,
          handleSubmit,
          isValid,
          dirty,
        }) => (
          <div className="register">
            <TextField
              id="outlined-basic"
              label="Имя"
              variant="outlined"
              className="field"
              name={"name"}
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.name}
            />
            {touched.name && errors.name && (
              <p className="error">{errors.name}</p>
            )}
            <TextField
              id="outlined-basic"
              label="Фамилия"
              variant="outlined"
              className="field"
              name={"secondName"}
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.secondName}
            />
            {touched.secondName && errors.secondName && (
              <p className="error">{errors.secondName}</p>
            )}
            <TextField
              id="outlined-basic"
              label="Логин"
              variant="outlined"
              className="field"
              name={"login"}
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.login}
            />
            {touched.login && errors.login && (
              <p className="error">{errors.login}</p>
            )}
            <TextField
              type="password"
              id="outlined-basic"
              label="Пароль"
              variant="outlined"
              className="field"
              name={"password"}
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.password}
            />
            {touched.password && errors.password && (
              <p className="error">{errors.password}</p>
            )}
            <TextField
              type="password"
              id="outlined-basic"
              label="Подтвердите пароль"
              variant="outlined"
              className="field"
              name={"confirmPassword"}
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.confirmPassword}
            />
            {touched.confirmPassword && errors.confirmPassword && (
              <p className="error">{errors.confirmPassword}</p>
            )}
            <TextField
              id="outlined-basic"
              label="Email"
              variant="outlined"
              className="field"
              name={"email"}
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.email}
            />
            {touched.email && errors.email && (
              <p className="error">{errors.email}</p>
            )}
            <TextField
              id="outlined-basic"
              label="Подтвердите Email"
              variant="outlined"
              className="field"
              name={"confirmEmail"}
              onChange={handleChange}
              onBlur={handleBlur}
              value={values.confirmEmail}
            />
            {touched.confirmEmail && errors.confirmEmail && (
              <p className="error">{errors.confirmEmail}</p>
            )}
            <Button
              onClick={handleSubmit}
              disabled={!isValid || !dirty}
              type="submit"
              variant="contained"
              className="btn"
            >
              Зарегистрироваться
            </Button>
          </div>
        )}
      </Formik>
    </>
  );
};

内容的提问来源于stack exchange，提问作者Forthie