React Academy · Lekcja

Dynamiczne pola z useFieldArray

Dodawanie, usuwanie i zmienianie kolejności dynamicznych pól formularza za pomocą hooka useFieldArray.

Dynamiczne pola z useFieldArray to bezpłatna lekcja React Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Witamy

W tej lekcji użyjesz hooka useFieldArray z React Hook Form do tworzenia formularzy z dynamicznymi listami pól, na przykład do dodawania, usuwania i zmieniania kolejności elementów.

Czym jest useFieldArray?

useFieldArray zarządza tablicą pól wewnątrz React Hook Form. Udostępnia metody append, prepend, remove, swap, move i insert do modyfikowania listy pól.

import { useFieldArray } from 'react-hook-form';

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

Konfiguracja: control z useForm

useFieldArray wymaga obiektu `control` z useForm. Wyodrębnij go razem z register i handleSubmit.

const { register, control, handleSubmit } = useForm({
  defaultValues: { phoneNumbers: [{ value: '' }] },
});

Renderowanie pól

Użyj mapowania po `fields`, aby wyrenderować każdy element. Użyj `id` pola jako klucza Reacta, a nie indeksu. Zarejestruj każde pole za pomocą składni ścieżki tablicy.

return fields.map((field, index) => (
  <div key={field.id}>
    <input
      {...register(`phoneNumbers.${index}.value`)}
    />
    <button onClick={() => remove(index)}>Remove</button>
  </div>
));

Dodawanie nowych pól

Wywołaj append() z obiektem zawierającym wartości domyślne, aby dodać nowe pole na końcu listy. Formularz zarejestruje je automatycznie.

<button onClick={() => append({ value: '' })}>
  Add Phone Number
</button>

Usuwanie pól

Wywołaj remove(index), aby usunąć pole z określonej pozycji. Wszystkie kolejne pola przesuną się w górę, a ich rejestracje zostaną automatycznie zaktualizowane.

<button onClick={() => remove(index)}>Delete</button>

Walidacja minimalnej liczby pól

Długość tablicy możesz zwalidować w schemacie Zod za pomocą .min(), aby zagwarantować istnienie co najmniej jednego pola.

const schema = z.object({
  emails: z.array(z.object({ value: z.string().email() }))
           .min(1, 'At least one email required'),
});

Zamiana i przenoszenie pól

Użyj `swap(indexA, indexB)`, aby zamienić dwa pola miejscami, lub `move(from, to)`, aby przenieść pole. Metody te służą do tworzenia sortowalnych list pól z funkcją przeciągania i upuszczania.

swap(0, 2); // swap first and third items
move(3, 0); // move item at index 3 to the top

Zagnieżdżony useFieldArray

Możesz zagnieździć useFieldArray wewnątrz innego useFieldArray, aby tworzyć wielopoziomowe formularze dynamiczne, na przykład fakturę z pozycjami, z których każda ma własne elementy podrzędne.

Wysyłanie danych tablicy

Podczas wysyłania handleSubmit przekazuje całą tablicę jako część obiektu danych. Uzyskasz do niej dostęp za pomocą data.phoneNumbers — jest to tablica obiektów zgodnych ze strukturą pól.

const onSubmit = (data) => {
  console.log(data.phoneNumbers);
  // [{ value: '555-1234' }, { value: '555-5678' }]
};

Szybkie sprawdzenie

Dlaczego podczas renderowania pól useFieldArray należy używać field.id, a nie indeksu tablicy, jako klucza Reacta?

Podsumowanie

useFieldArray udostępnia tablicę fields oraz metody append/remove/swap/move. Używaj field.id jako klucza Reacta, rejestruj pola za pomocą składni „fieldName.index.subfield”, a tablice waliduj w Zod za pomocą min/max.

Kurs ukończony

Gratulacje! Ukończyłeś kurs **Zarządzanie formularzami za pomocą React Hook Form**. Potrafisz już tworzyć wydajne formularze z RHF, stosować walidację schematów Zod i tworzyć dynamiczne tablice pól.

Często zadawane pytania

Czy lekcja „Dynamiczne pola z useFieldArray” jest bezpłatna?

Tak — pełny tekst „Dynamiczne pola z useFieldArray” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Dynamiczne pola z useFieldArray”?

Dodawanie, usuwanie i zmienianie kolejności dynamicznych pól formularza za pomocą hooka useFieldArray. Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Dynamiczne pola z useFieldArray”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do React Academy