Обработка форм React и проверка с помощью Formik и Yup

Использование Formik для упрощения создания форм React, избегая при этом магии

Обработка и управление формами в приложениях React - это слишком хлопотно. Существует много разных библиотек, но они делают гораздо больше, чем вы на самом деле хотите. На помощь приходит Формик. Согласно документации, Formik в основном выполняет 3 вещи:

• Получение значений в состоянии формы и вне его
• Сообщения о проверке и ошибках
• Обработка отправки формы

Круто, и этот пост рассказывает вам, как выполнить эти три шага с Formik, а также с другой библиотекой (которая никоим образом не связана с Formik) под названием Yup, которая позволяет вам выполнять валидацию очень элегантным способом. И что самое интересное, Formik теперь поддерживает хуки и хорошо работает с шаблоном рендеринга реквизита.

Установить

Давайте сначала установим Formik.

npm install formik
// or
yarn formik

Совет. Воздерживаясь от использования внешних библиотек управления состоянием, Formik делает ваши формы более пригодными для повторного использования в других проектах. Это отличная возможность использовать Bit (Github) для совместного использования и повторного использования ваших форм между приложениями, а также для их организации для вашего будущего себя и товарищей по команде! 😃

useFormik

Formik предоставляет ловушку useFormik, которая принимает объект со свойством initialValues и onSubmit и возвращает объект, который имеет все вспомогательные методы, необходимые для управления состоянием вашей формы.

Все просто, правда? Этот formik объект является вашим набором инструментов и содержит все инструменты, необходимые для управления вашим состоянием внутри вашей формы. Предоставляемые инструменты: handleSubmit, handleChange, handleBlur и многие другие. Вот пример небольшой формы:

Легко, из нашего набора инструментов мы извлекаем два метода и прикрепляем их к onSubmit и onChange, и у нас все хорошо.

1. Мы используем только один обработчик изменений.

2. Все значения в полях отображаются на объект values своими name.

Formik получает значения формы в объекте values, который выглядит так:

{ firstName: 'Sam', lastName: 'Martin' }

Отлично, давайте добавим в него еще несколько полей и выполним проверку с помощью самого Formik.

Мы можем передать другое значение нашей useFormik ловушке, называемой validate. Это функция, которая принимает объект values и возвращает объект errors. Согласно документам,

Formik будет проверять после каждого нажатия клавиши (событие изменения), событие размытия каждого ввода, а также перед отправкой. Он продолжит выполнение функции onSubmit, которую мы передали useFormik(), только в том случае, если ошибок нет (т.е. если наша функция проверки вернула {}).

Но все же эта проверка неэффективна. Нам пришлось бы написать логику проверки для каждого поля, а это слишком большая работа. И вот тогда на сцену выходит Ага.

Что Ага? Ага, это средство проверки схемы объектов и анализатор объектов JavaScript. Давайте подключим Yup с Formik.

Установить

npm install -S yup
or 
yarn add yup

Вместо validate мы просто должны предоставить свойство validationSchema для useFormik, и вместо написания функции мы должны указать приемлемую схему для нашей формы.

Он работает совершенно так же, за исключением того, что вместо написания нашей собственной логики проверки мы можем попросить вас выполнить нашу работу.

Formik намного мощнее этого, вы можете попробовать гораздо больше разных вещей, чем это. Вот песочница для кода выше.

‹Формик /›

Как я упоминал ранее, Formik хорошо работает не только с хуками, но и с подходом рендеринга реквизита. Так что, если ваше приложение не использует хуки, не беспокойтесь, потому что Formik работает и без хуков.

Давайте сделаем то, что мы сделали с useFormik, с <Formik />.

Он основан на подходе к рендерингу реквизита, а остальное остается неизменным.

Вместо useFormik мы получим Formik от формика. И нужно обернуть нашу форму внутри этого компонента, примерно так:

И объект, который мы передали в хуки, в этом случае становится реквизитом.

Ага

Я хотел немного поговорить о Ага, потому что мы еще не видели, на что он действительно способен. Давайте рассмотрим более сложное приложение Yup.

const validationSchema = yup.object().shape({
   username: yup
     .string()
     .max(16)
     .required(),
   email: yup
     .string()
     .email()
     .required(),
   password: yup
    .string()
    .min(8)
    .required(),
   confirm_password: yup
    .string()
    .required()
    .oneOf(
    [yup.ref('password'), null],
     'Passwords must match',
   ),
})

Имя пользователя является обязательным и может содержать не более 16 символов. Очевидно, что проверка электронной почты поддерживается с помощью email(). Кроме того, мы можем проверить соответствие полей password и confirm_password, все, что нам нужно сделать, это проверить, совпадает ли password (получить с помощью ref) с полем confirm_password.

Заключение

Formik - это не только Ага, но и многое другое. Этот пост предназначен для того, чтобы вы начали с ним работать, и мы почти не коснулись его поверхности. Если вы хотите узнать больше, вы можете проверить документацию для Formik и Yup, или вы можете подождать еще одного моего поста, в котором я расскажу о расширенных вариантах использования Formik и Yup.

Я надеюсь, что вам понравилась эта статья и вы узнали что-то новое, и если вы действительно хлопали сердцем, подписывайтесь на меня, чтобы получить больше контента на Medium, а также в Twitter. Пожалуйста, не стесняйтесь комментировать и спрашивать что угодно. Спасибо за чтение 🙏 💖.

Учить больше