Formik 验证 isSubmitting / isValidating 未设置为 true

Question

我有一个用户要求的表格，我非常明显地表明该表格无效。因此，我计划弹出一个sweetalert对话框，让他们知道他们需要仔细检查表单。我想我可以在验证中这样做，以便在提交尝试失败时提醒他们：

const validate = values => {

    console.log(formik.isSubmitting); // always prints false

    console.log(formik.isValidating); // always prints false

    const errors = {};

    if (!values.name) {

      errors.name = 'Required';

    }

    if (Object.keys(errors).length > 0 && formik.isSubmitting) {

        Swal.fire({

            icon: 'error',

            title: "Oops. . .",

            text: "There are errors with the form. Please double check your options.",

            footer: "<div>Problems: " + Object.keys(errors).join(', ') + "</div>"

        })

    }

    return errors;

};

const formik = useFormik({

    initialValues: {

        name: item.name

    },

    enableReinitialize: true,

    validate,

    onSubmit: values => {

       // also tried adding 

       formik.setSubmitting(true); 

       //do stuff

    }

})

但它们isSubmitting / isValidating总是假的。我是否需要向函数传递额外的属性validate才能访问这些值？

https://codesandbox.io/s/nervous-wescoff-cf2y1?file=/src/App.js

Answer 1

我相信该validate方法不是向用户显示对话框的好地方。您的用例看起来像是 formik lib 的自定义需求。import React, { useState } from "react";import "./styles.css";import { useFormik } from "formik";import Swal from "sweetalert2";import "bootstrap/dist/css/bootstrap.min.css";export default function App() {  const [item, setItem] = useState({    name: "",    email: ""  });  const validate = (values) => {    console.log("values: ", values);    const errors = {};    if (!values.name) {      errors.name = "Required";    }    return errors;  };  const initialValues = {    name: item.name,    email: item.email  };  const formik = useFormik({    initialValues,    enableReinitialize: true,    validate,    onSubmit: (values) => {      console.log("inside onSubmit", values);    }  });  const customSubmitHandler = (event) => {    event.preventDefault();    const touched = Object.keys(initialValues).reduce((result, item) => {      result[item] = true;      return result;    }, {});    // Touch all fields without running validations    formik.setTouched(touched, false);    formik.setSubmitting(true);    formik      .validateForm()      .then((formErrors) => {        if (Object.keys(formErrors).length > 0) {          Swal.fire({            icon: "success",            title: "Yes. . .",            text: "This one should fire if everything is working right",            footer:              "<div>Problems: " + Object.keys(formErrors).join(", ") + "</div>"          });        } else {          formik.handleSubmit(event);        }        formik.setSubmitting(false);      })      .catch((err) => {        formik.setSubmitting(false);      });  };  return (    <form id="campaignForm" onSubmit={customSubmitHandler}>      <div className="form-group">        <label htmlFor="name">Name</label>        <input          id="name"          type="text"          onChange={formik.handleChange}          value={formik.values.name}          className="form-control"          placeholder="Enter name"        />        {formik.errors.name ? (          <div className="text-danger">{formik.errors.name}</div>        ) : null}      </div>      <div className="form-group">        <label htmlFor="name">Email</label>        <input          id="name"          type="email"          onChange={formik.handleChange}          value={formik.values.email}          className="form-control"          placeholder="Enter email"        />        {formik.errors.email ? (          <div className="text-danger">{formik.errors.email}</div>        ) : null}      </div>      <div className="form-group">        <button className="btn btn-info" type="submit">          Submit        </button>      </div>    </form>  );}