0Pricing
React Academy · Leçon

Champs dynamiques avec useFieldArray

Ajoutez, supprimez et réorganisez des champs de formulaire dynamiques avec le hook useFieldArray.

Champs dynamiques avec useFieldArray est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.

Bienvenue

Dans cette leçon, vous utiliserez le crochet useFieldArray de React Hook Form pour créer des formulaires contenant des listes dynamiques de champs, par exemple pour ajouter, supprimer et réorganiser des éléments.

Qu'est-ce que useFieldArray ?

useFieldArray gère un tableau de champs dans un formulaire React Hook Form. Il fournit des méthodes pour ajouter à la fin, ajouter au début, supprimer, échanger, déplacer et insérer des éléments dans la liste de champs.
import { useFieldArray } from 'react-hook-form';

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

Configuration : contrôle fourni par useForm

useFieldArray nécessite l'objet `control` fourni par useForm. Déstructurez-le avec register et handleSubmit.
const { register, control, handleSubmit } = useForm({
  defaultValues: { phoneNumbers: [{ value: '' }] },
});

Affichage des champs

Utilisez map sur `fields` pour afficher chaque élément. Utilisez l'`id` du champ comme clé React, et non son indice. Enregistrez chaque champ avec la syntaxe des chemins de tableau.
return fields.map((field, index) => (
  <div key={field.id}>
    <input
      {...register(`phoneNumbers.${index}.value`)}
    />
    <button onClick={() => remove(index)}>Remove</button>
  </div>
));

Ajout de nouveaux champs

Appelez la fonction d'ajout avec un objet contenant les valeurs par défaut pour ajouter un nouveau champ à la fin de la liste. Le formulaire l'enregistre automatiquement.
<button onClick={() => append({ value: '' })}>
  Add Phone Number
</button>

Suppression de champs

Appelez la fonction de suppression avec un indice pour supprimer le champ situé à une position précise. Tous les champs suivants remontent d'une position et leurs enregistrements sont automatiquement mis à jour.
<button onClick={() => remove(index)}>Delete</button>

Validation du nombre minimal de champs

Vous pouvez valider la longueur du tableau dans un schema Zod avec .min() afin de garantir qu'au moins un champ existe.
const schema = z.object({
  emails: z.array(z.object({ value: z.string().email() }))
           .min(1, 'At least one email required'),
});

Échange et déplacement de champs

Utilisez `swap(indexA, indexB)` pour échanger deux champs, ou `move(from, to)` pour repositionner un champ. Ces méthodes servent à créer des listes de champs que l'on peut trier par glisser-déposer.
swap(0, 2); // swap first and third items
move(3, 0); // move item at index 3 to the top

useFieldArray imbriqués

Vous pouvez imbriquer un useFieldArray dans un autre useFieldArray pour créer des formulaires dynamiques à plusieurs niveaux, par exemple une facture avec des lignes, chacune contenant des sous-éléments.

Envoi des données du tableau

Lors de l'envoi, handleSubmit transmet le tableau complet dans l'objet de données. Accédez-y avec data.phoneNumbers : il s'agit d'un tableau d'objets correspondant à la structure des champs.
const onSubmit = (data) => {
  console.log(data.phoneNumbers);
  // [{ value: '555-1234' }, { value: '555-5678' }]
};

Vérification rapide

Pourquoi devez-vous utiliser field.id, et non l'indice du tableau, comme clé React lors de l'affichage des champs de useFieldArray ?

Récapitulatif

useFieldArray vous fournit un tableau de champs ainsi que des méthodes pour ajouter, supprimer, échanger et déplacer des éléments. Utilisez field.id comme clé React, enregistrez les champs avec la syntaxe « fieldName.index.sous-champ » et validez les tableaux avec les limites min et maximale de Zod.

Cours terminé

Félicitations ! Vous avez terminé **Gestion des formulaires avec React Hook Form**. Vous pouvez maintenant créer des formulaires performants avec RHF, appliquer la validation par schema Zod et créer des tableaux de champs dynamiques.

Questions Fréquemment Posées

La leçon « Champs dynamiques avec useFieldArray » est-elle gratuite ?

Oui — le texte complet de « Champs dynamiques avec useFieldArray » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Champs dynamiques avec useFieldArray » ?

Ajoutez, supprimez et réorganisez des champs de formulaire dynamiques avec le hook useFieldArray. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer React Academy ?

Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Champs dynamiques avec useFieldArray » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon React Academy ?

Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Premiers pas avec React Hook Form
  2. Règles de validation et messages d’erreur
  3. Validation de schéma avec Zod
  4. Champs dynamiques avec useFieldArray
← Retour à React Academy