Formik验证正在提交/isValiating未设置为True

原学程将引见Formik验证正在提接/isValiating未树立为True的处置办法,这篇学程是从其余处所瞅到的,而后减了1些海外法式员的疑问与解问,愿望能对于您有所赞助,佳了,上面开端进修吧。

Formik验证正在提交/isValiating未设置为True 教程 第1张

成绩描写

我有1个我的用户要求的表单,我清晰天注解该表单是有效的。是以,我筹划弹出1个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函数传播其余讲具能力拜访这些值?

推举谜底

我以为validate办法没有合适向用户显示对于话框。
您的用例瞅起去像是Formik库中的1个定制需供。分享他们在外部提接表单时所做的任务-https://formik.org/docs/guides/form-submission。

您不妨添减用于提接的自界说办法。

是以,
我已将您的沙盒分叉并停止了革新-https://codesandbox.io/s/custom-form-submit-stackoverflow⑻znzf

让我晓得您的设法主意。

编纂:添减代码,以就即便链交过时,您仍不妨晓得怎样操纵

import React, { useState } from "react";
import "./styles.css";
import { useFormik } from "formik";
import Swal from "sweetalert二";
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>
  );
}

佳了闭于Formik验证正在提接/isValiating未树立为True的学程便到这里便停止了,愿望趣模板源码网找到的这篇技巧文章能赞助到年夜野,更多技巧学程不妨在站内搜刮。