React formik和yup

Question

我是个新手。我尝试使用formik和yup进行表单验证，但我遇到了一个问题。我的验证工作正常，但如果我输入一个字段，所有字段都显示验证如何限制它。如果我输入名称字段，并给出一些输入，它将显示所有下面的字段还显示“验证错误”。我想像onBlur一样使用它，我们如何在formik中使用它？

import React from "react";
import "./App.css";
import { useFormik } from "formik";
import * as yup from "yup";

const App = () => {
  const formik = useFormik({
    initialValues: {
      name: "",
      email: "",
      list: "",
      password: "",
      confirmPassword: ""
    },
    validationSchema: yup.object({
      name: yup
        .string()
        .strict()
        .trim()
        .required("Name is required")
        .min(5, "Minimum 5 cars required")
        .max(15, "maximum 15 cars only"),
      email: yup
        .string()
        .email()
        .required("Email is required"),
      list: yup.string().required(),
      password: yup.string().required("password is required"),
      confirmPassword: yup
        .string()
        .oneOf(
          [yup.ref("password"), null],
          "Confirm password must same as password"
        )
        .required("password is required")
    }),
    onSubmit: userInputData => {
      console.log(userInputData);
    }
  });
  return (
    <div className="container mt-3">
      <div className="jumbotron">
        <form onSubmit={formik.handleSubmit}>
          <div className="form-group">
            <label>Name:</label>
            <input
              type="text"
              name="name"
              className="form-control"
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
            />
            {formik.errors.name ? (
              <div className="text-danger">{formik.errors.name}</div>
            ) : null}
          </div>
          <div className="form-group">
            <label>Email</label>
            <input
              type="text"
              name="email"
              className="form-control"
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
            />
            {formik.errors.email ? (
              <div className="text-danger">{formik.errors.email}</div>
            ) : null}
          </div>
          <div className="form-group">
            <label>Select List</label>
            <select
              className="form-control"
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              value={formik.values.list}
              name="list"
            >
              <option value="">--- select one ---</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>
            {formik.errors.list ? (
              <div className="text-danger">{formik.errors.list}</div>
            ) : null}
          </div>
          <div className="form-group">
            <label>Password</label>
            <input
              type="password"
              name="password"
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              className="form-control"
              value={formik.values.password}
            />
            {formik.errors.password ? (
              <div className="text-danger">{formik.errors.password}</div>
            ) : null}
          </div>
          <div className="form-group">
            <label>Confirm Password</label>
            <input
              type="password"
              name="confirmPassword"
              onChange={formik.handleChange}
              onBlur={formik.handleBlur}
              value={formik.values.confirmPassword}
              className="form-control"
            />
            {formik.errors.confirmPassword ? (
              <div className="text-danger">{formik.errors.confirmPassword}</div>
            ) : null}
          </div>
          <button type="submit" className="btn btn-primary">
            Submit
          </button>
        </form>
      </div>
    </div>
  );
};

export default App;

Answer 1

使用touched属性。

就像下面的代码

{formik.errors.email ? ( <div className="text-danger">{formik.errors.email}</div> ) : null}

您可以像这样使用已触摸的属性

{formik.touched.email && formik.errors.email && ( <div className="text-danger">{formik.errors.email}</div> )}

文档- https://jaredpalmer.com/formik/docs/tutorial中已经提到了这一点