React Academy · Lezione

Campi dinamici con useFieldArray

Aggiunga, rimuova e riordini i campi dinamici del form utilizzando l'hook useFieldArray.

Campi dinamici con useFieldArray è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Benvenuti

In questa lezione utilizzerà l'hook useFieldArray di React Hook Form per creare form con elenchi dinamici di campi, ad esempio per aggiungere, rimuovere e riordinare elementi.

Che cos'è useFieldArray?

useFieldArray gestisce un array di campi all'interno di un React Hook Form. Fornisce i metodi append, prepend, remove, swap, move e insert per modificare l'elenco dei campi.

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

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

Configurazione: control da useForm

useFieldArray richiede l'oggetto `control` proveniente da useForm. Lo destrutturi insieme a register e handleSubmit.

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

Rendering dei campi

Esegua il mapping di `fields` per visualizzare ogni elemento. Utilizzi l'`id` del campo come chiave React, non l'indice. Registri ogni campo utilizzando la sintassi dei percorsi degli array.

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

Aggiunta di nuovi campi

Chiami append() con un oggetto contenente i valori predefiniti per aggiungere un nuovo campo alla fine dell'elenco. Il form lo registra automaticamente.

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

Rimozione dei campi

Chiami remove(index) per eliminare un campo da una posizione specifica. Tutti i campi successivi avanzano di una posizione e le relative registrazioni vengono aggiornate automaticamente.

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

Validazione del numero minimo di campi

Può validare la lunghezza dell'array in uno schema Zod con .min() per assicurarsi che esista almeno un campo.

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

Scambio e spostamento dei campi

Utilizzi `swap(indexA, indexB)` per scambiare due campi oppure `move(from, to)` per riposizionare un campo. Questi metodi vengono utilizzati per creare elenchi di campi ordinabili tramite trascinamento.

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

useFieldArray annidati

Può annidare useFieldArray all'interno di un altro useFieldArray per creare form dinamici su più livelli, ad esempio una fattura con voci, ciascuna delle quali contiene sotto-voci.

Invio dei dati dell'array

Al momento dell'invio, handleSubmit passa l'intero array come parte dell'oggetto dei dati. Vi accede tramite data.phoneNumbers: un array di oggetti che corrispondono alla struttura dei campi.

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

Verifica rapida

Perché è opportuno utilizzare field.id, e non l'indice dell'array, come chiave React durante il rendering dei campi di useFieldArray?

Riepilogo

useFieldArray fornisce l'array fields e i metodi append/remove/swap/move. Utilizzi field.id come chiave React, registri i campi con la sintassi 'fieldName.index.subfield' e validi gli array con min/max di Zod.

Corso completato

Congratulazioni! Ha completato **Gestione dei form con React Hook Form**. Ora può creare form efficienti con RHF, applicare la validazione tramite schemi Zod e creare array di campi dinamici.

Domande Frequenti

La lezione «Campi dinamici con useFieldArray» è gratuita?

Sì — il testo completo di «Campi dinamici con useFieldArray» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Campi dinamici con useFieldArray»?

Aggiunga, rimuova e riordini i campi dinamici del form utilizzando l'hook useFieldArray. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Campi dinamici con useFieldArray»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Introduzione a React Hook Form
Regole di validazione e messaggi di errore
Validazione degli schemi con Zod
Campi dinamici con useFieldArray

← Torna a React Academy