День 19: Использование формы React Hook и контроллера для создания форм в React
React Hook Form — это эффективная библиотека для управления формами в приложениях React. Это позволяет разработчикам легко управлять состояниями форм, проверкой и отправкой без написания чрезмерного количества кода. В этой библиотеке используется неконтролируемый подход, что означает, что вам не нужно создавать переменные состояния для каждого поля формы.
В этом руководстве мы рассмотрим процесс настройки формы React Hook и ее использование для управления формами в наших приложениях React.
Монтаж
Для начала давайте установим пакет react-hook-form
в наше приложение с помощью следующей команды:
npm install react-hook-form
Настройка формы
После завершения установки мы можем начать использовать хук useForm
, предоставленный библиотекой. Этот хук предоставляет нам набор полезных методов для управления нашими формами.
Чтобы использовать хук, мы импортируем его из пакета react-hook-form
и вызываем в нашем компоненте, как показано ниже:
import React from 'react'; import { useForm } from 'react-hook-form'; function App() { const { register, handleSubmit } = useForm(); const onSubmit = (data) => console.log(data); return ( <form onSubmit={handleSubmit(onSubmit)}> {/* Form fields go here */} </form> ); }
В приведенном выше примере мы используем хук useForm
для создания экземпляра формы. Затем мы деструктурируем методы register
и handleSubmit
из экземпляра.
Метод register
используется для регистрации каждого поля формы с помощью хука. Он принимает объект, содержащий различные параметры, включая имя поля, правила проверки и значение по умолчанию.
Метод handleSubmit
используется для обработки отправки форм. Мы передаем нашу функцию обратного вызова onSubmit
в качестве параметра этому методу.
Создание полей формы
Теперь, когда мы настроили наш экземпляр формы, мы можем начать создавать поля формы. Для каждого поля нам нужно будет использовать метод register
, чтобы зарегистрировать его в экземпляре формы. Вот пример того, как создать поле ввода:
<input type="text" {...register("firstName", { required: true })} />
В приведенном выше примере мы используем метод register
для регистрации поля ввода с именем firstName
и обязательным правилом проверки.
Мы также можем передать дополнительные правила проверки и значения по умолчанию в метод register
, как показано ниже:
<input type="text" {...register("email", { required: true, pattern: /^\S+@\S+$/i, })} defaultValue="[email protected]" />
Обработка ошибок формы
React Hook Form упрощает обработку ошибок формы. Мы можем использовать объект errors
, предоставленный хуком, чтобы проверить, не произошли ли какие-либо ошибки проверки.
Вот пример того, как проверить, есть ли ошибка проверки в поле firstName
:
<input type="text" {...register("firstName", { required: true })} /> {errors.firstName && <p>This field is required</p>}
В приведенном выше примере мы используем объект errors
, чтобы проверить, есть ли в поле firstName
ошибка проверки. Если есть ошибка, мы выводим сообщение об ошибке.
мы узнали об основах React Hook Form и о том, как его можно использовать для создания форм простым и эффективным способом. В этом сообщении блога мы углубимся в форму React Hook Form и узнаем о компоненте Controller
, который можно использовать для создания контролируемых входных данных.
Управляемые входы — это входы, которые контролируются состоянием React. Это означает, что всякий раз, когда значение ввода изменяется, состояние обновляется и пользовательский интерфейс перерисовывается. React Hook Form имеет собственный способ обработки данных формы, но его также можно интегрировать с контролируемыми входными данными с помощью компонента Controller
.
Что такое компонент контроллера?
Компонент Controller
— это компонент более высокого порядка, предоставляемый React Hook Form. Его можно использовать для создания контролируемых входных данных, интегрированных с React Hook Form. Компонент Controller
заботится о регистрации ввода с помощью React Hook Form, а также обрабатывает обновление значения ввода при его изменении.
Как использовать компонент контроллера
Чтобы использовать компонент Controller
, нам нужно импортировать его из формы React Hook:
import { Controller } from 'react-hook-form';
Затем мы можем использовать его в нашей форме:
<form onSubmit={handleSubmit(onSubmit)}> <Controller name="firstName" control={control} defaultValue="" render={({ field }) => <input {...field} />} /> <button type="submit">Submit</button> </form>
В приведенном выше примере мы создали контролируемый ввод для поля имени. Мы передали следующие реквизиты компоненту Controller
:
name
: имя поля в объекте данных формыcontrol
: объектcontrol
, предоставленный формой React Hook.defaultValue
: значение входа по умолчаниюrender
: свойство рендеринга, которое принимает объект со свойствомfield
и возвращает элемент React.
Объект field
, переданный реквизиту render
, содержит следующие свойства:
ref
: ссылка на элемент вводаonChange
: функция, которую следует вызывать всякий раз, когда значение ввода изменяетсяvalue
: текущее значение входаname
: имя элемента ввода
Распределяя объект field
по элементу input
, мы фактически делаем вход контролируемым.
Настройка ввода
Компонент Controller
можно использовать для создания любого типа управляемого ввода. Мы можем настроить ввод, передав дополнительные реквизиты элементу input
:
<Controller name="email" control={control} defaultValue="" render={({ field }) => ( <input {...field} type="email" placeholder="Enter your email address" /> )} />
В приведенном выше примере мы настроили ввод, установив его тип на адрес электронной почты и добавив заполнитель.
Заключение
В этом руководстве мы узнали, как настроить форму React Hook и использовать ее для управления формами в наших приложениях React. Мы увидели, как легко создавать поля форм, обрабатывать отправленные формы и обрабатывать ошибки форм с помощью этой библиотеки.
React Hook Form — это мощная библиотека, которая может сэкономить разработчикам много времени и усилий при управлении формами в их приложениях.
мы узнали о компоненте Controller
, предоставляемом React Hook Form. Мы видели, как его можно использовать для создания контролируемых входных данных, интегрированных с React Hook Form. Мы также научились настраивать ввод, передавая дополнительные реквизиты элементу input
. С помощью компонента Controller
мы можем создавать формы простым и эффективным способом, сохраняя при этом преимущества контролируемого ввода.