Formik — очень крутая библиотека, и я использую ее каждый раз. Итак, сегодня я пишу этот пост для начинающих, и в нем рассказывается об использовании formik в простой форме входа.

Я расскажу об этих вещах здесь

Создать и оформить форму входа

Я создал форму входа, как это

<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>

и оформил вот так

.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;
}

После этого вы получите форму входа, аналогичную этой

Инициализировать состояния formik по умолчанию

Давайте сначала импортируем useFormik из formik

import { useFormik } from "formik";

Теперь вы можете создать объект formik с помощью хука useFormik и определить в нем свой initialValues

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

давайте воспользуемся функцией formik handleChange и передадим значения formik в наши поля ввода

...
          <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}
          />

Применить проверки в полях входа

Я использовал библиотеку Yup для проверки своих полей. Вы также можете использовать собственное регулярное выражение, если по какой-то причине не хотите использовать Yup.
Итак, сначала импортируйте Yup вот так

import * as Yup from "yup";

Затем я добавил validationSchema для полей входа в систему.

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")
    }),
  });

Здесь Yup проверяет, предоставлены ли значения поля; если да, то это правильный формат или нет.
Таким образом, если какая-либо ошибка произойдет в соответствии с нашей схемой проверки, она будет сохранена в объекте formik errors, и мы можем распечатать ее рядом с полем или под ним, как это

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

Теперь наша форма выглядит так с ошибками валидации

Написать функцию отправки формы

Последний шаг — создать функцию отправки и выполнить операцию со значениями formik. Вы можете перейти к следующему экрану, вызвать API или сделать что угодно. Я просто установил состояние для отправки и показал сообщение пользователю при входе в систему.

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);
    }
  });

и передайте функцию formik handleSubmit в вашу форму следующим образом

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

и вот ваша форма готова с проверкой полей!
Вы можете найти полный исходный код здесь



formik-react — CodeSandbox
formik-react от AneeqaKhan с использованием formik, react, react-dom, react-scripts, yupcodesandbox.io