Реагировать формик и юп - PullRequest
Новая
       8

Реагировать формик и юп

0 голосов
/ 05 марта 2020

Я новичок, чтобы реагировать. Я пытаюсь проверить форму, используя 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;

1 Ответ

1 голос
/ 06 марта 2020

Использовать 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> )}

Это упоминалось в до c - https://jaredpalmer.com/formik/docs/tutorial

...