Используйте React Hook Form для повышения производительности вашего приложения
Формы являются неотъемлемой частью любого веб-сайта или приложения. Вы увидите, что они используются повсюду, от экранов входа / регистрации до добавления и обновления данных.
При использовании React, как правило, мы хотим создать управляемый компонент при работе с входными данными.
Например, нам нужно будет создать переменную состояния и установить ее в качестве значения ввода. Затем нам нужно будет добавить на вход прослушиватель событий onChange. Теперь, когда ввод обновляется, у нас есть контролируемое состояние в нашем приложении.
Как видно из вышесказанного, для этого требуется несколько дополнительных строк кода. Представьте, что у нас есть форма с несколькими входами? Нам нужно будет создать отдельное состояние для каждого входа и добавить значение и прослушиватель onChange для каждого из них. Кроме того, каждый раз, когда мы меняем значение ввода, это вызывает повторную визуализацию компонента.
Чтобы упростить задачу, поприветствуйте библиотеку React Hook Form. Он описывается как,
«Эффективные, гибкие и расширяемые формы с простой в использовании проверкой».
Звучит хорошо, не правда ли? В этой статье мы рассмотрим библиотеку React Hook Form. Мы начнем с изучения того, как реализовать это в нашем приложении, а затем посмотрим, как обрабатывать валидацию.
Начиная
Чтобы продемонстрировать эту библиотеку, мы построим простую форму. Во-первых, давайте создадим форму в нашем проекте React, как показано ниже. Это простая форма с тремя полями ввода и кнопкой отправки.
const App = () => {
return (
<form className="App">
<input type="text" placeholder="Username" name="username" />
<input type="email" placeholder="Email" name="email" />
<input type="password" placeholder="Password" name="password" />
<input type="submit" />
</form>
);
};
Я также добавил несколько основных стилей, чтобы он выглядел немного лучше. Теперь, если мы откроем наше приложение, оно будет выглядеть примерно так.
Использование формы React Hook
Чтобы использовать библиотеку React Hook Form, давайте сначала установим ее в наш проект. Вы можете найти пакет npm здесь.
Мы импортируем ловушку useForm из библиотеки.
import { useForm } from 'react-hook-form';
Затем вызовите его внутри функционального компонента. Этот хук даст нам три переменные, когда мы его вызовем, register handleSubmit и errors.
const { register, handleSubmit, errors } = useForm();
Чтобы отслеживать изменения в наших входных данных, мы передадим register в качестве ссылки на каждый вход, который мы хотим отслеживать. Теперь каждый вход будет выглядеть так.
<input
type="text"
placeholder="Username"
name="username"
ref={register}
/>
Затем давайте займемся обработкой отправки формы. Мы создадим onSubmit функцию, которая будет принимать данные. А пока просто выведем его в консоль.
const onSubmit = (data) => {
console.log(data);
};
В форме добавьте функцию handleSubmit как опору и передайте onSubmit как функцию обратного вызова.
<form className="App" onSubmit={handleSubmit(onSubmit)}>
Теперь, когда мы добавляем данные в форму и отправляем их, мы увидим результат в нашей консоли. Теперь у нас есть красивый объект со всеми данными нашей формы.
Не забудьте добавить свойство name к входам. Имя, которое мы передаем входам, будет использоваться в качестве ключа в нашем объекте данных.
Добавление проверки
Чтобы добавить правила проверки в форму, мы можем передать необязательный объект в качестве аргумента register.
Например, если мы хотим сделать ввод обязательным, мы можем просто добавить следующее к любому вводу.
<input
type="text"
placeholder="Username"
name="username"
ref={register({ required: true })}
/>
Теперь, если мы попытаемся отправить форму без имени пользователя, это не сработает.
Мы можем отобразить сообщение об ошибке, используя значение errors из предыдущего. Любые возникающие ошибки станут опорой для объекта ошибок, и мы сможем использовать это для отображения ошибок.
Например, если пользователь не вводит имя пользователя (которое мы сделали обязательным), мы можем отобразить такую ошибку.
{errors.username && <p>Username required</p>}
Список поддерживаемых правил проверки:
- обязательный
- мин
- Максимум
- minLength
- максимальная длина
- шаблон
- подтверждать
Если вы следовали за кодом, теперь у нас должна быть форма с настройкой проверки, как показано ниже.
Заключение
Спасибо за чтение! Надеюсь, эта статья помогла вам начать работу с библиотекой React Hook Form.
Он прост в использовании, хорош для производительности и требует намного меньше кода. Попробуйте в следующем приложении, где потребуется форма.
Если вы хотите ознакомиться с полным исходным кодом созданного нами примера, загляните в репозиторий GitHub здесь.
Чтобы узнать о другой полезной библиотеке React, ознакомьтесь со статьей ниже, где мы рассмотрим библиотеку React Icons.
