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

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

В этой записи блога мы рассмотрим формы в React с помощью библиотеки под названием React Hook Form. Вы можете задать себе вопрос:

Зачем нам нужна библиотека для обработки форм, если мы можем сделать это сами, используя основные функции React?

Давайте посмотрим на следующий пример:

Как вы можете видеть в приведенном выше коде, у нас есть простая форма входа с двумя полями: имя пользователя и пароль. Значения полей хранятся в объекте React state в методе handleChange.

В приведенном выше коде есть некоторые проблемы:

Качество кода:

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

Производительность:

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

На помощь приходит React Hook Form, поскольку он делает всю тяжелую работу за нас, поэтому мы можем сосредоточиться только на бизнес-логике.

React Hook Form имеет несколько замечательных функций:

Давайте посмотрим, как мы можем интегрировать библиотеку в пример кода, который мы видели ранее.

Во-первых, мы должны добавить библиотеку в качестве зависимости в проект:

Использование нпм:

npm install — save react-hook-form

Использование пряжи:

yarn add react-hook-form

Следующий шаг, мы должны импортировать хук useForm в компонент.

import { useForm } from ‘react-hook-form’;

Хук useForm получает и возвращает конфигурацию и вспомогательные методы:

Опишу самые важные и используемые опции и хелперы:

Входные свойства:

  • режим: этот параметр позволяет настроить проверку перед событием onSubmit. Возможные значения: onChange | Размытие | onSubmit (по умолчанию) | коснулся | все
  • defaultValues: значения defaultValues ​​для входных данных используются в качестве начального значения при первом отображении компонента перед взаимодействием с ним пользователя. Рекомендуется установить defaultValues ​​для всех входных данных на неопределенные значения, такие как пустая строка или нуль.
  • resolver: эта функция позволяет вам использовать любую внешнюю библиотеку проверки, такую ​​как Yup, Zod, Joi, Superstruct, Vest и многие другие. Цель состоит в том, чтобы убедиться, что вы можете легко интегрировать любую библиотеку проверки, которую вы предпочитаете. Если вы не используете библиотеку, вы всегда можете написать собственную логику для проверки форм.
  • context: этот объект контекста является изменяемым и будет внедрен во второй аргумент преобразователя или объект контекста проверки Yup.
  • shouldUnregister: по умолчанию введенное значение будет сохранено при удалении ввода. Однако вы можете установить для shouldUnregister значение true, чтобы отменить регистрацию ввода во время размонтирования.

Выходные свойства:

  • register: этот метод позволяет зарегистрировать ввод или выбрать элемент и применить правила проверки к форме React Hook. Все правила проверки основаны на стандарте HTML, а также позволяют использовать пользовательские методы проверки.
  • formState: этот объект содержит информацию о состоянии формы, такую ​​как ошибки, свойства isValid, isTouched.
  • watch: будет отслеживать указанные входные данные и возвращать их значения. Это полезно для определения того, что рендерить.
  • handleSubmit: эта функция получит данные формы, если проверка формы прошла успешно.
  • ошибки: сбросить либо все состояние формы, либо ее часть.
  • setValue: эта функция позволяет вам динамически устанавливать значение зарегистрированного поля. В то же время он пытается избежать ненужных повторных рендеров.
  • getValues: оптимизированный помощник для чтения значений формы. Разница между watch и getValues ​​заключается в том, что getValues ​​не будет запускать повторную визуализацию или подписываться на изменения ввода.
  • control: этот объект содержит методы для регистрации компонентов в форме React Hook.
  • триггер: вручную запускает проверку формы или ввода. Этот метод также полезен, когда у вас есть зависимая проверка (проверка ввода зависит от другого значения ввода).

Теперь, после того как мы увидели основные возможности библиотеки, давайте посмотрим, каким стал компонент после перезаписи:

Легко правильно!

Это был простой пример, мы просто использовали собственные входные данные HTML. Теперь представьте, что вы работаете с компонентом, который не поддерживает ссылки, и вы хотите подключить компонент для регистрации в форме. Не беспокойтесь, react-hook-form представляет компонент-оболочку, который облегчит вам работу с любым сторонним компонентом.

В приведенном выше примере мы используем компонент ReactDatePicker из библиотеки «react-datepicker». Компонент передается в свойство рендеринга Controller, которое предоставляет свойство field, содержащее некоторые полезные свойства и методы, такие как текущее значение и обработчик onChange.

Обратите внимание, что мы заменили функцию register свойством control.

Имя является обязательным, чтобы react-hook-form мог правильно отслеживать поле.

Обработка проверки и ошибок

React-hook-form поставляется с некоторыми полезными валидаторами, такими как:

  • required: логическое значение, которое, если оно истинно, указывает, что ввод должен иметь значение, прежде чем форма может быть отправлена. Вы можете назначить строку для возврата сообщения об ошибке в объекте ошибок.
  • minLength: минимальная длина значения, которое можно принять для этого ввода.
  • maxLength: максимальная длина значения, которое можно принять для этого ввода.
  • шаблон: шаблон регулярного выражения для ввода.

Подробнее можно узнать в официальной документации

В приведенном выше примере мы определяем адрес электронной почты и пароль как обязательные поля с соответствующими сообщениями об ошибках.

Чтобы отобразить сообщение об ошибке в представлении, мы используем компонент ErrorMessage из библиотеки @hookform/error-message. Компонент получает объект ошибок из formState и имя ввода, к которому он должен привязаться.

Это был простой и легкий способ, давайте перейдем к более сложным вещам!

Расширенная проверка формы

Формы могут стать очень запутанными, когда дело доходит до обработки сложных форм, содержащих поля с множественным выбором, поля массива (таблица, в которой каждая строка имеет несколько полей)….

Как мы упоминали ранее, react-hook-form позволяет нам использовать сторонние библиотеки, такие как Yup, о которых мы расскажем в этой статье.

Yup — это построитель схемы для анализа и проверки значений во время выполнения. Он имеет множество валидаторов и позволяет нам создавать собственные валидаторы в случае особых потребностей.

Интеграция Yup довольно проста. Все, что вам нужно сделать, это установить пакеты yup и @hookform/resolvers:

yarn add yup @hookform/resolvers

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

Код будет выглядеть так:

Как видите, у нас есть небольшой код, который делает много вещей за кулисами.

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

После этого мы подключили схему к форме через yupResolver.

Чтобы создать многострочную форму, мы используем хук useFieldArray, который дает свойство fields, содержащее ссылку на каждый элемент в списке.

Метод append создает новую пустую запись в форме.

Подробнее о хуке useFieldArray можно прочитать в документации

На этом все, надеюсь статья вам понравилась. Не стесняйтесь, если у вас есть какие-либо вопросы.

Ваше здоровье.