0Pricing
React Academy · Урок

Начало работы с React Hook Form

Установите RHF, вызовите useForm, зарегистрируйте поля ввода и обработайте отправку формы.

«Начало работы с React Hook Form» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 4 уроков всего.

Добро пожаловать

В этом уроке Вы установите React Hook Form, вызовете useForm, зарегистрируете поля ввода и будете обрабатывать отправку форм без управления отдельными переменными состояния.

Зачем нужен React Hook Form

Традиционные управляемые формы в React требуют отдельного useState для каждого поля и onChange для каждого поля ввода. React Hook Form (RHF) управляет всем этим внутри себя с помощью неуправляемых полей ввода, предоставляя более простой API и вызывая меньше перерисовок.

Установка

Установите пакет. Для базового использования дополнительные одноранговые зависимости не требуются.
npm install react-hook-form

Хук useForm

Вызовите useForm(), чтобы получить функцию register, оболочку handleSubmit и formState. Это три основных элемента, необходимые для любой формы.
import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = data => console.log(data);
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      ...
    </form>
  );
}

Регистрация полей ввода

Передайте результат register('fieldName') каждому полю ввода с помощью оператора spread. RHF автоматически добавляет к полю ссылку и обработчики событий — значение и onChange не нужны.
<input {...register('email')} type="email" />
<input {...register('password')} type="password" />
<button type="submit">Log in</button>

Обратный вызов onSubmit

handleSubmit проверяет все поля и вызывает Ваш обратный вызов onSubmit с типизированным объектом данных только в том случае, если форма корректна. Если проверка не пройдена, вместо этого он заполняет formState.errors.
const onSubmit = (data) => {
  // data = { email: 'a@b.com', password: 'secret' }
  loginUser(data);
};

Значения по умолчанию

Передайте `defaultValues` в useForm, чтобы предварительно заполнить поля формы. Это полезно для форм редактирования, в которых загружаются существующие данные.
const { register } = useForm({
  defaultValues: { email: user.email, name: user.name },
});

Свойства formState

formState предоставляет полезные логические значения: `isSubmitting` (равно true во время выполнения handleSubmit), `isDirty` (равно true, если изменено хотя бы одно поле), `isValid` (равно true, если нет ошибок) и объект `errors`.
const { formState: { isSubmitting, isDirty, isValid, errors } } = useForm();

Сброс формы

Вызовите `reset()`, чтобы очистить все поля и сбросить formState. При необходимости передайте новые значения по умолчанию.
const { reset } = useForm();

const onSubmit = async (data) => {
  await saveData(data);
  reset(); // clear after submit
};

Преимущество производительности

Поскольку RHF использует неуправляемые поля ввода, форма не перерисовывается после каждого нажатия клавиши — в отличие от управляемых форм React. Перерисовки вызывают только ошибки проверки и состояние отправки, поэтому большие формы работают быстро.

Быстрая проверка

Что происходит при вызове handleSubmit(onSubmit), когда пользователь отправляет форму?

Итоги

Установите RHF, вызовите useForm, чтобы получить register и handleSubmit, примените register() к полям ввода с помощью оператора spread и оберните обработчик отправки в handleSubmit. Задайте defaultValues для форм редактирования и вызовите reset() после успешной отправки.

Далее

Следующий урок: **Правила проверки и сообщения об ошибках** — Вы примените встроенные правила проверки и научитесь отображать пользователям сообщения об ошибках.

Часто задаваемые вопросы

Урок «Начало работы с React Hook Form» бесплатный?

Да — полный текст урока «Начало работы с React Hook Form» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 4 уроков всего.

Чему я научусь в уроке «Начало работы с React Hook Form»?

Установите RHF, вызовите useForm, зарегистрируйте поля ввода и обработайте отправку формы. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать React Academy?

Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Начало работы с React Hook Form»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке React Academy?

Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Начало работы с React Hook Form
  2. Правила валидации и сообщения об ошибках
  3. Валидация схем с помощью Zod
  4. Динамические поля с useFieldArray
← Назад к React Academy