React Academy · leksjon

Dynamiske felter med useFieldArray

Legg til, fjern og endre rekkefølgen på dynamiske skjemafelter ved hjelp av useFieldArray-hooken.

Leksjon 4 av 413 trinn

Dynamiske felter med useFieldArray er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Velkommen

I denne leksjonen skal De bruke useFieldArray-hooken i React Hook Form til å bygge skjemaer med dynamiske feltlister – for eksempel til å legge til, fjerne og endre rekkefølgen på elementer

Hva er useFieldArray?

useFieldArray administrerer en rekke med felt i et React Hook Form-skjema. Den tilbyr metodene append, prepend, remove, swap, move og insert for å endre feltlisten

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

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

Oppsett: control fra useForm

useFieldArray krever `control`-objektet fra useForm. Destrukturer det sammen med register og handleSubmit

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

Gjengi feltene

Bruk `fields` til å gjengi hvert element. Bruk feltets `id` som React-nøkkel, ikke indeksen. Registrer hvert felt med syntaksen for matrisebaner

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

Legge til nye felt

Kall append() med et objekt som inneholder standardverdier, for å legge til et nytt felt på slutten av listen. Skjemaet registrerer det automatisk

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

Fjerne felt

Kall remove(index) for å slette et felt på en bestemt plassering. Alle påfølgende felt flyttes én plass opp, og registreringene deres oppdateres automatisk

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

Validering av minimum antall felt

De kan validere lengden på matrisen i et Zod-skjema med .min() for å sikre at minst ett felt finnes

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

Bytte og flytte felt

Bruk `swap(indexA, indexB)` til å bytte plass på to felt, eller `move(from, to)` til å flytte et felt. Dette brukes til å bygge sorterbare feltlister med dra-og-slipp

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

Nestede useFieldArray

De kan neste useFieldArray i en annen useFieldArray for dynamiske skjemaer med flere nivåer, for eksempel en faktura med linjeelementer som hver har underelementer

Sende inn matrisedata

Når skjemaet sendes inn, sender handleSubmit hele matrisen som en del av data-objektet. Få tilgang til den via data.phoneNumbers – en matrise med objekter som samsvarer med feltstrukturen

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

Kunnskapssjekk

Hvorfor bør De bruke field.id, og ikke matriseindeksen, som React-nøkkel når De gjengir useFieldArray-felt?

Besvar den i den interaktive leksjonen

Oppsummering

useFieldArray gir Dem en fields-matrise og metodene append/remove/swap/move. Bruk field.id som React-nøkkel, registrer med syntaksen «fieldName.index.subfield», og valider matriser med Zod min/max

Kurset er fullført

Gratulerer! De har fullført **Administrere skjemaer med React Hook Form**. Nå kan De bygge effektive skjemaer med RHF, bruke Zod-skjemavalidering og opprette dynamiske feltmatriser

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Dynamiske felter med useFieldArray» gratis?

Ja – hele teksten i «Dynamiske felter med useFieldArray» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Dynamiske felter med useFieldArray»?

Legg til, fjern og endre rekkefølgen på dynamiske skjemafelter ved hjelp av useFieldArray-hooken. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Dynamiske felter med useFieldArray»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til React Academy