День 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 мы можем создавать формы простым и эффективным способом, сохраняя при этом преимущества контролируемого ввода.