0Pricing
React Academy · Урок

Динамические поля с useFieldArray

Добавляйте, удаляйте и меняйте порядок динамических полей формы с помощью хука useFieldArray.

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

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

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

Что такое useFieldArray?

useFieldArray управляет массивом полей внутри React Hook Form. Он предоставляет методы append, prepend, remove, swap, move и insert для изменения списка полей.
import { useFieldArray } from 'react-hook-form';

const { fields, append, remove } = useFieldArray({
  control,
  name: 'phoneNumbers',
});

Настройка: control из useForm

useFieldArray требует объект `control` из useForm. Деструктурируйте его вместе с register и handleSubmit.
const { register, control, handleSubmit } = useForm({
  defaultValues: { phoneNumbers: [{ value: '' }] },
});

Отображение полей

Используйте `fields`, чтобы перебрать элементы и отобразить каждый из них. В качестве ключа React используйте `id` поля, а не его индекс. Зарегистрируйте каждое поле с помощью синтаксиса пути к массиву.
return fields.map((field, index) => (
  <div key={field.id}>
    <input
      {...register(`phoneNumbers.${index}.value`)}
    />
    <button onClick={() => remove(index)}>Remove</button>
  </div>
));

Добавление новых полей

Вызовите append() с объектом значений по умолчанию, чтобы добавить новое поле в конец списка. Форма автоматически зарегистрирует его.
<button onClick={() => append({ value: '' })}>
  Add Phone Number
</button>

Удаление полей

Вызовите remove(index), чтобы удалить поле в определённой позиции. Все последующие поля сдвинутся вверх, а их регистрации обновятся автоматически.
<button onClick={() => remove(index)}>Delete</button>

Валидация минимального количества полей

Вы можете проверить длину массива в схеме Zod с помощью .min(), чтобы убедиться, что существует хотя бы одно поле.
const schema = z.object({
  emails: z.array(z.object({ value: z.string().email() }))
           .min(1, 'At least one email required'),
});

Перестановка и перемещение полей

Используйте `swap(indexA, indexB)`, чтобы поменять местами два поля, или `move(from, to)`, чтобы переместить поле. Это используется для создания сортируемых списков полей с поддержкой перетаскивания.
swap(0, 2); // swap first and third items
move(3, 0); // move item at index 3 to the top

Вложенный useFieldArray

Вы можете вложить useFieldArray в другой useFieldArray для создания многоуровневых динамических форм, например счёта с позициями, каждая из которых содержит вложенные элементы.

Отправка данных массива

При отправке формы handleSubmit передаёт весь массив как часть объекта данных. Обратитесь к нему по адресу data.phoneNumbers — это массив объектов, соответствующих структуре полей.
const onSubmit = (data) => {
  console.log(data.phoneNumbers);
  // [{ value: '555-1234' }, { value: '555-5678' }]
};

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

Почему при отображении полей useFieldArray в качестве ключа React следует использовать field.id, а не индекс массива?

Итоги

useFieldArray предоставляет массив fields и методы append/remove/swap/move. Используйте field.id как ключ React, регистрируйте поля с помощью синтаксиса «fieldName.index.subfield» и проверяйте массивы с помощью min/max в Zod.

Курс завершён

Поздравляем! Вы завершили курс **Управление формами с React Hook Form**. Теперь Вы умеете создавать производительные формы с RHF, применять валидацию по схемам Zod и создавать динамические массивы полей.

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

Урок «Динамические поля с useFieldArray» бесплатный?

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

Чему я научусь в уроке «Динамические поля с useFieldArray»?

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

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

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

Сколько времени занимает урок «Динамические поля с useFieldArray»?

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

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

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

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

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