반응에서 useFormik 소품과 함께 formik을 사용하는 방법

Formik은 매우 멋진 라이브러리이며 매번 사용합니다. 그래서 오늘 저는 초보자를 위해 이 글을 쓰고 있으며 간단한 로그인 양식에서 formik을 사용하는 방법을 다루고 있습니다.

나는 여기서 이것들을 다룰 것이다.

Create and style a basic login form

Initialize formik default states

Apply validation on login fields

Write submit form function

로그인 양식 만들기 및 스타일 지정

I created login form like this

      <form className="form">
        <div className="field">
          <label htmlFor="email">Email Address</label>
          <input
            id="email"
            name="email"
            type="email"
          />
        </div>
        <div className="field">
          <label htmlFor="password">Password</label>
          <input
            id="password"
            name="password"
            type="password"
          />
        </div>
        <button type="submit" className="submit-btn">
          Login
        </button>
      </form>

and styled it like this

.form {
  width: 300px;
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  background-color: #ddd;
  border-radius: 8px;
  padding: 10px;
}
.field {
  display: flex;
  justify-content: space-between;
  padding-bottom: 10px;
}
.submit-btn {
  align-self: flex-end;
  width: 80px;
}

After this, you'll get a login form same as this

Formik 기본 상태 초기화

Lets import the useFormik first from the formik

import { useFormik } from "formik";

Now you can create a formik object using useFormik hook and define your initialValues in it

  const formik = useFormik({
    initialValues: {
      email: "",
      password: ""
    }
  });

let's use the formik handleChange function and pass formik values to our input fields

     ...
          <input
            id="email"
            name="email"
            type="email"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={formik.values.email}
          />
     ...
          <input
            id="password"
            name="password"
            type="password"
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
            value={formik.values.password}
          />

로그인 필드에 유효성 검사 적용

I used Yup library to apply validations on my fields. You can use custom regex as well if you don't want to use Yup for some reason.
So first import Yup like this

import * as Yup from "yup";

Then I added validationSchema for my login fields

 const formik = useFormik({
    initialValues: {
      email: "",
      password: ""
    },
    validationSchema: Yup.object().shape({
      email: Yup.string()
        .email("Invalid email address")
        .required("Please enter email"),
      password: Yup.string().required("Please enter password")
    }),
  });

Here Yup is validating if the values of the field are provided; if yes, then is it correct format or not.
So if any error happens according to our validation schema, it will be stored in formik's errors object and we can print it beside or below the field like this

     {formik.touched.email && formik.errors.email ? (
         <span className="error">{formik.errors.email}</span>
     ) : null}

Now our form looks like this with validation errors

제출 양식 작성 기능

The last step is to create submit function and perform your operation on formik values. You can navigate to the next screen, call API, or anything you want to do. I just set a state on submit and shown a message to a user on the login

  const formik = useFormik({
    initialValues: {
      email: "",
      password: ""
    },
    validationSchema: Yup.object().shape({
      email: Yup.string()
        .email("Invalid email address")
        .required("Please enter email"),
      password: Yup.string().required("Please enter password")
    }),
    onSubmit: (values) => {
      setIsLoggedIn(true);
    }
  });

and pass formik handleSubmit function to your form like this

<form className="form" onSubmit={formik.handleSubmit}>

and here your form is ready with field validations!!
You can find the full source code here

Reference

이 문제에 관하여(반응에서 useFormik 소품과 함께 formik을 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aneeqakhan/how-to-use-formik-with-useformik-prop-in-react-2k6d

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.