React — Базовое создание и проверка форм с помощью Formik и Yup

В этой статье мы узнаем, как создать базовую форму с помощью Formik и другой библиотеки под названием Yup, которая позволяет нам выполнять проверку за несколько шагов. В приложениях React обработка форм и управление ими не так просто. В диспетчере пакетов Node есть много библиотек (NPM). Formik помогает нам создавать формы более простым способом вместе с Yup. Прежде чем мы начнем, мы рассмотрим основы Formik и Yup.

# Формик

Согласно документам, Formik — это небольшая библиотека, которая помогает нам в трех вещах:

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

# Ага

Yup — это конструктор схем JavaScript для разбора и проверки значений. Объясните схему, преобразуйте значение для соответствия, проверьте форму существующего значения или и то, и другое. Схема Yup чрезвычайно эффективна и поддерживает моделирование сложных взаимозависимых проверок или преобразований значений.

Далее мы установим пакеты Formik и Yup.

# for npm 
npm install formik yup --save 
# for yarn 
yarn add formik yup

Вам также может понравиться: Отложенная загрузка с React Suspense

1. Создание полей формы и начальных значений в Formik

Я рассмотрю простую форму регистрации, состоящую из полей «Имя», «Электронная почта», «Пароль» и «Подтверждение пароля».

const initialValues = { 
  name: '', 
  email: '', 
  password: '', 
  confirmPassword: '' 
};

Имя свойства, объявленное в initialValues, должно совпадать с именем полей формы. Вы должны инициализировать все поля начальными значениями, иначе React выдаст ошибку.

2. Создание схемы проверки с помощью Yup

Настройка полей формы проста, проверка значений формы не так проста. Вы должны написать много строк кода для проверки всех полей. Yup помогает нам упростить проверку формы. Formik имеет возможность проверять поля формы, которые называются validationSchema. Мы можем передать схему проверки Yup в validationSchema.

Как вы можете видеть в приведенном выше коде, схема действительно проста. Я обернул наши четыре поля в объект Yup, а затем написал схему для отдельного поля. Например, мы рассматриваем имя, должно быть обязательным, что означает, что значение не является пустым, имеет минимальную длину 2 символа и максимальную длину 20 символов.

name:  Yup.string()
      .min(2, "Name must be at least 2 characters")
      .max(20, "Name must be at most 20 characters") 
      .required("Name can not be empty")

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

{ 
  errors.name && touched.name 
  ? ( <p class="error">{errors.name}</p> ) : null
}

Но мне лично понравился компонент Formik ErrorMessage, который действительно удобен.

<ErrorMessage name="name"> 
  {value=> <p class="error">{value}</p>} 
</ErrorMessage>

Вам также может понравиться: Recoil — новая библиотека управления состоянием, разработанная Facebook для React

3. Обработка отправки формы

Чтобы отправить форму в Formik, вам нужно использовать handleSubmit. Мы можем получить доступ к отправленным значениям в обработчике onSubmit. Вы можете делать со значениями все, что хотите, если хотите отправить эти значения в свой сервер в качестве полезной нагрузки для API.

<Formik 
   initialValues={initialValues} 
   validationSchema={validationSchema} 
   onSubmit={(values) => { 
      setFormValues(JSON.stringify(values)); 
}}> 
... 
</Formik>

Вывод

Я опубликую различные типы проверки формы с использованием Formik и Yup. Если вы хотите узнать больше, следите за нашей статьей, я расскажу о более продвинутых вариантах использования Formik и Yup в нашей следующей статье. Надеюсь, вам понравилась эта статья и вы узнали что-то новое. Не стесняйтесь связаться с нами. Спасибо за чтение.

Github: Справочник по коду

Первоначально опубликовано на https://www.codinghub.net.