Создание форм в React может быть утомительной задачей, особенно когда вам нужно проверить вводимые пользователем данные. К счастью, React Hook Form — это мощная библиотека, которая упрощает этот процесс, а в сочетании с Typescript она становится еще более мощной. В этом руководстве мы рассмотрим процесс создания формы с помощью React Hook Form и Typescript и поймем, почему это отличный выбор для создания форм.

Предпосылки:

  • Базовые знания React и Typescript
  • Установлен менеджер пакетов пряжи

Настройка проекта: для начала давайте создадим новый проект React с помощью Yarn. Откройте терминал и выполните следующие команды:

yarn init -y 
yarn add react react-dom 
yarn add -D typescript @types/react @types/react-dom

Затем установите Zod и React Hook Form:

yarn add react-hook-form zod 
yarn add -D @types/react-hook-form @types/zod

Установив зависимости, давайте создадим базовый компонент формы.

Создание формы:

Во-первых, давайте создадим базовую форму с двумя полями: адрес электронной почты и пароль. Создайте новый файл LoginForm.tsx и добавьте следующий код:

Наличие такого свойства, как password: z.string().min(6), в схеме Zod удобно, поскольку оно обеспечивает встроенную проверку поля пароля, гарантируя, что предоставленное значение представляет собой строку длиной не менее шести символов. Эту проверку можно дополнительно настроить, связав дополнительные методы Zod, такие как .max() или .regex(), со свойством password.

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

Заключение:

React Hook Form и Typescript упрощают создание мощных и удобных в сопровождении форм в React. Используя типы и мощную библиотеку проверки, такую ​​как Zod, мы можем выявлять ошибки на ранней стадии и обеспечивать надежность и надежность наших форм.