Создавайте и проверяйте формы React с минимальными усилиями.
Создание форм в приложении React может быть сложным и занимать много времени. С помощью библиотеки React Hook Form вы можете легко добавлять высокопроизводительные формы в свое приложение React.
React Hook Form — это библиотека для создания форм в React, которая упрощает процесс создания сложных и многоразовых форм. Если вы хотите создать приложение React, вам следует научиться создавать формы в React, используя библиотеку форм React Hook.
Установка формы React Hook
Чтобы начать использовать React Hook Form, вы должны установить его с помощью менеджеров пакетов npm или yarn.
Чтобы установить React Hook Form с помощью npm, выполните в терминале следующую команду:
npm установить форму реакции-хука
Чтобы установить React Hook Form с помощью пряжи, выполните следующую команду:
пряжа добавить реактивную форму крючка
Создание формы с использованием формы React Hook
Чтобы создать форму с помощью React Hook Form, вы должны использовать использоватьформу
крюк. использоватьформу hook дает вам доступ к методам и свойствам, которые вы будете использовать для создавайте и управляйте своими формами в приложении React.Вот пример, показывающий, как использовать использоватьформу крюк:
Импортировать Реагировать от«реагировать»
Импортировать { использовать форму } от'реагировать-крюк-форма';функцияФорма() {
константа {регистрация, обработка отправки} = useForm();
константа при отправке = (данные) =>консоль.log (данные);возвращаться (
экспортпо умолчанию Форма;
Библиотека React Hook Form использует регистр метод для регистрации ваших входных значений в хуке. регистр метод соединяет поля ввода формы с библиотекой форм React Hook, чтобы библиотека могла отслеживать и проверять поля ввода.
В приведенном выше блоке кода вы регистрируете ввод с именем «имя». ручкаОтправить Метод библиотеки React Hook Form обрабатывает отправку формы.
Чтобы обработать отправку формы, вы передадите функцию обратного вызова onSubmit к ручкаОтправить метод. onSubmit функция получит объект, содержащий значения всех входных данных формы.
Подтвердите входные данные с помощью метода регистрации
регистр Метод позволяет вам настроить правила проверки для ваших полей ввода. Чтобы добавить проверку к полям ввода, вы передаете объект с правилами проверки в качестве второго аргумента функции регистр метод.
Вот так:
Импортировать Реагировать от«реагировать»
Импортировать { использовать форму } от'реагировать-крюк-форма';функцияФорма() {
константа{регистрация, обработка отправки} = useForm();
константа при отправке = (данные) =>консоль.log (данные);
возвращаться (
экспортпо умолчанию Форма;
В этом примере вы добавляете правило проверки в поле ввода «имя» и два правила проверки в поле «пароль». необходимый правило указывает, что пользователю необходимо заполнить поля ввода, и он не может отправить форму, если поля пусты.
максимальная длина правило устанавливает максимальное количество букв алфавита входного значения. Помимо необходимый и максимальная длина методы, вы можете добавить другие правила проверки, такие как мин, Макс, минДлина, шаблон, и подтверждать.
мин Макс
мин правило определяет минимальное значение для поля ввода и Макс правило указывает его максимальное значение.
Вы можете использовать мин и Макс правила с входными данными числового типа, например:
'число' { ...регистр("возраст", {мин: 18, Макс: 35}) } />
Значение поля ввода выше должно быть не менее 18 и не более 35.
минДлина
минДлина правило похоже на максимальная длина правило, но вместо этого устанавливает минимальное количество букв алфавита:
'текст' { ...регистр("имя", { минДлина: 10 })}/>
В этом примере правило minLength указывает, что входное значение должно иметь длину не менее 10 символов.
шаблон и проверка
шаблон правило определяет шаблон регулярного выражения, которому должно соответствовать входное значение. подтверждать правило позволяет определить пользовательскую функцию проверки для проверки входного значения. Функция должна возвращать либо истинный или строковое сообщение об ошибке.
Например:
'текст' { ...регистр("имя", {шаблон: **/^[A-Za-z]+$/**}) } />
'число' { ...регистр("тест", {**подтвердить: (ценить) => значение <= 12** }) } />
В этом примере для ввода «имя» используется шаблон правило. шаблон требует, чтобы входное значение содержало только буквы алфавита (прописные и строчные).
Вход «тест» использует подтверждать правило для определения пользовательской функции проверки, которая проверяет, меньше ли ее значение 12 или равно ему.
Обработка ошибок в вашей форме
Библиотека React Hook Form предоставляет встроенный механизм для обработка ошибок JavaScript в ваших формах. ручкаОтправить функция, вызываемая, когда пользователь отправляет форму, возвращает обещание, которое разрешается с данными формы, если проверка прошла успешно.
Однако, если возникают какие-либо ошибки проверки, обещание отклоняется с объектом ошибки, содержащим ошибки проверки.
Вот пример того, как обрабатывать ошибки с помощью ручкаОтправить функция:
Импортировать Реагировать от«реагировать»
Импортировать { использовать форму } от'реагировать-крюк-форма';функцияФорма() {
константа { регистрация, обработка отправки, formState: { ошибки } } = useForm();
константа при отправке = (данные) =>консоль.log (данные);возвращаться (
'число' { ...регистр("возраст", {мин: 18, Макс: 35,}) } />
{ошибки.возраст?.тип 'Макс' && <охватывать> Вы слишком стары для этого сайтаохватывать>}
{ошибки.возраст?.тип 'мин' && <охватывать> Вы слишком молоды для этого сайтаохватывать>}
экспортпо умолчанию Форма;
В этом кодовом блоке formState объект получает доступ к ошибкам каждого поля. ошибки Объект хранит ошибки проверки для каждого поля ввода. ошибки объект условно отображает сообщение об ошибке для каждого недопустимого поля.
Для имя поле ввода, если необходимый правило не соблюдается, рядом с полем ввода появится сообщение об ошибке — «Пожалуйста, введите ваше имя». Если значение возраст поле ввода находится за пределами допустимого диапазона, появится сообщение об ошибке.
Если значение меньше 18, сообщение об ошибке будет «Вы слишком молоды для этого сайта», а если значение больше 35, сообщение об ошибке будет «Вы слишком стары для этого сайта».
Теперь вы можете создавать надежные формы в React
Создание форм в React может быть сложным и трудоемким процессом. Тем не менее, React Hook Form упрощает эту задачу, предоставляя простую в использовании и гибкую библиотеку для управления данными формы и их проверки.
С помощью хука useForm, метода register и метода handleSubmit создание форм в React становится более эффективным и оптимизированным процессом. Вы можете создавать функциональные формы, что, в свою очередь, улучшает взаимодействие с пользователем и общее качество ваших приложений React.
