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>

  );

}