React Academy · Lektion

Dynamiska fält med useFieldArray

Lägg till, ta bort och ändra ordning på dynamiska formulärfält med useFieldArray-hooken.

Lektion 4 av 413 steg

Dynamiska fält med useFieldArray är en gratis lektion i React Academy på CoddyKit. Detta är lektion 4 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen kommer ni att använda React Hook Forms hook useFieldArray för att bygga formulär med dynamiska listor av fält — till exempel för att lägga till, ta bort och ändra ordning på poster.

Vad är useFieldArray?

useFieldArray hanterar en array med fält i ett React Hook Form. Den tillhandahåller metoderna append, prepend, remove, swap, move och insert för att ändra fältlistan.

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

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

Konfiguration: control från useForm

useFieldArray kräver objektet `control` från useForm. Extrahera det tillsammans med register och handleSubmit.

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

Rendera fälten

Iterera över `fields` för att rendera varje post. Använd fältets `id` som React-nyckel, inte indexet. Registrera varje fält med syntaxen för array-sökvägar.

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

Lägga till nya fält

Anropa append() med ett objekt som innehåller standardvärden för att lägga till ett nytt fält sist i listan. Formuläret registrerar det automatiskt.

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

Ta bort fält

Anropa remove(index) för att ta bort ett fält på en specifik position. Alla efterföljande fält flyttas upp och deras registreringar uppdateras automatiskt.

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

Validering av minsta antal fält

Ni kan validera arrayens längd i ett Zod-schema med .min() för att säkerställa att minst ett fält finns.

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

Byta plats på och flytta fält

Använd `swap(indexA, indexB)` för att byta plats på två fält eller `move(from, to)` för att flytta ett fält. Dessa metoder används för att bygga sorterbara fältlistor med dra och släpp.

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

Nästlade useFieldArray

Ni kan nästla useFieldArray i en annan useFieldArray för formulär med flera dynamiska nivåer, till exempel en faktura med radposter som var och en har underposter.

Skicka arraydata

När formuläret skickas skickar handleSubmit hela arrayen som en del av data-objektet. Ni kommer åt den via data.phoneNumbers — en array med objekt som följer fältstrukturen.

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

Snabb kontroll

Varför bör ni använda field.id, och inte arrayindexet, som React-nyckel när ni renderar fält från useFieldArray?

Besvara frågan i den interaktiva lektionen

Sammanfattning

useFieldArray ger er en fields-array samt metoderna append/remove/swap/move. Använd field.id som React-nyckel, registrera fält med syntaxen 'fieldName.index.subfield' och validera arrayer med Zods min/max.

Kursen är klar

Grattis! Ni har slutfört **Hantera formulär med React Hook Form**. Nu kan ni bygga högpresterande formulär med RHF, använda Zod-schemavalidering och skapa dynamiska fältarrayer.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Dynamiska fält med useFieldArray” gratis?

Ja – hela texten till ”Dynamiska fält med useFieldArray” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Dynamiska fält med useFieldArray”?

Lägg till, ta bort och ändra ordning på dynamiska formulärfält med useFieldArray-hooken. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 4 av 4.

Hur lång tid tar lektionen ”Dynamiska fält med useFieldArray”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till React Academy