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

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

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

Установка

Вы можете просто установить библиотеки formik и yup с npm или yarn. yup упростит проверку с помощью formik.

npm install formik yup --save

or

yarn add formik yup

Сначала давайте создадим нашу форму с текстовыми полями материала в нашем компоненте формы.

Затем давайте импортируем formik и yup в наш компонент формы. Здесь я использую withFormik вместо Formik. Когда вы используете yup, если он выдает ошибку Не удается прочитать свойство‘ object ’of undefined », вы можете попробовать импортировать его следующим образом:

import * as Yup from 'yup';

Если он не работает, понизьте свою версию до «0.24.1», потому что с новой версией есть некоторые проблемы.

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

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

Добавьте обработчики onchange и onBlur с проверкой ошибок для каждого поля.

Добавьте следующие изменения в кнопки.

Вот вам и формик. Чтобы найти больше проверок с помощью да, вы можете следовать этой документации для да проверок.

Вы можете изменить дескриптор отправки по своему усмотрению. Вы также можете сбросить форму, нажав кнопку отправки, не имея отдельной кнопки сброса, подобной этой. Если вам нужно установить значения в текстовые поля с помощью реквизита, убедитесь, что вы enableReinitialize в withFormik const.

handleSubmit: (values, { ..., resetForm })=>
    ...
    resetForm();
}

Затем вы можете обернуть компонент константой, которую вы создали со всеми проверками. Есть еще кое-что, что вы можете сделать с формиком. Вы можете найти их все в документации formik.

Найдите полный код здесь.

Наконец то же самое и с валидациями.