Formik 및 Yup(사용자 지정 후크)을 사용하여 양식 조건부 유효성 검사 반응

이 기사에서는 React 프로젝트에서 사용자 정의 후크와 함께 Formik 및 Yup(조건부)을 사용하여 빠르게 시작합니다.

요약

Formik은 React에서 양식을 작성하는 데 사용합니다. Formik은 양식을 만드는 동안 삶을 더 쉽게 만드는 많은 기능(코드 감소, 쉬운 유지 관리, 사용자 정의 후크, 쉬운 통합 등)을 제공합니다. Yup을 사용하면 유효성 검사를 위한 스키마를 쉽게 구축할 수 있습니다.

Formik 설치

npm i formik

설치 예

npm i yup

포믹 소개

양식 상태 안팎으로 값 가져오기

유효성 검사 및 오류 메시지

양식 제출 처리

// Simple form with formik
import React from "react";
import { useFormik } from "formik";
const SignupForm = () => {
  const formik = useFormik({
    initialValues: {
      email: "",
    },
    onSubmit: (values) => {
      alert(JSON.stringify(values, null, 2));
    },
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="email">Email Address</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

문제 설명

문제는 formik 양식에 두 개의 입력이 있다는 것입니다. 하나는 선택이고 다른 하나는 텍스트 입력 선택으로 '예' 또는 '아니오'의 두 가지 옵션이 있습니다. 사용자가 '예'를 선택하면 사용자는 요리에 대해 작성해야 하는 반면 사용자가 '아니오'를 선택하면 유효성 검사가 없습니다.

해결책

필요한 경우 암호를 입력하고 필요하지 않은 경우 선택적으로 만들어야 하는 형식 양식이 있었습니다. 'Yup'을 사용하여 필드의 유효성을 검사하는 동안 필드의 유효성 검사 논리를 조건부로 변경하는 방법이 필요했습니다. 이를 위해 일부 조건에 따라 필드에 적용되는 유효성 검사 논리를 변경할 수 있는 Yup의 when() 함수를 사용해야 합니다. 그런 다음 값을 전달하고 사용자가 옵션에서 예(사용자가 치킨을 먹고 싶어함)를 선택하면 사용자가 다른 조건을 원하지 않는 치킨 요리에 대해 작성해야 한다는 조건을 만듭니다. 요리에 대한 쓰기는 사용자 선택에 따라 다릅니다.

Formik useFormik 사용자 지정 후크

const formik = useFormik({
  initialValues: {
  dropdown: "",
  ChickenDish: "",
  },

그래 스키마

validationSchema: Yup.object({
  dropdown: Yup.string(),
  ChickenDish: Yup.string().when("dropdown", {
   is: (dropdown) => dropdown === "Yes",
  then: Yup.string().required("* Required"),
   }),

예시

yqn631.csb.app