4.10 ajout d'une liaison bidirectionnelle

Dans ce cours, nous allons mettre en place une liaison bidirectionnelle (two-way binding) entre les champs du formulaire et l'état React. Jusqu'à présent, nous écoutions les changements de l'utilisateur via onChange pour mettre à jour notre état. Maintenant, nous voulons aussi que l'état contrôle la valeur affichée dans l'input, ce qui nous permettra notamment de réinitialiser le champ à volonté.

Lier la value à l'état

La modification est simple : sur chaque champ <input>, à côté de onChange, on ajoute l'attribut value. Pour le champ titre, on écrit value={enteredTitle}. Ainsi, le champ affichera toujours la valeur stockée dans l'état. Si on change l'état avec son setter, l'input se met à jour automatiquement.

<input
  type="text"
  value={enteredTitle}
  onChange={titleChangeHandler}
/>

À première vue, cela ressemble à une boucle infinie : on écoute les changements pour mettre à jour l'état, et l'état met à jour la valeur affichée. Mais ce n'est pas le cas : React gère ce cycle de manière efficace. Ensuite, après le console.log(expenseData) qui suit la soumission du formulaire, on ajoute des appels aux setters pour vider les champs : setEnteredTitle(''), setEnteredAmount('') et setEnteredDate(''). On répète l'opération pour les trois états : le titre, le montant et la date.

La liaison bidirectionnelle est un autre concept clé de React qui se révèle particulièrement utile avec les formulaires : elle permet à la fois de collecter les entrées de l'utilisateur et de les modifier ou les effacer depuis le code. On se retrouve dans le prochain cours pour la suite.

En résumé

Cette leçon explique comment implémenter une liaison bidirectionnelle sur les éléments d'entrée (inputs) en ajoutant l'attribut `value` lié à l'état. La liaison bidirectionnelle synchronise les données dans les deux sens : les modifications de l'utilisateur mettent à jour l'état, et les changements d'état mettent à jour l'affichage de l'input, sans créer de boucle infinie. Ce pattern est fondamental pour gérer les formulaires en React, permettant à la fois de récupérer les données saisies et de les modifier programmatiquement.

Points clés

• Ajouter l'attribut `value` à l'input pour établir la liaison bidirectionnelle avec l'état
• La liaison bidirectionnelle synchronise automatiquement les changements dans les deux sens : input vers l'état ET état vers l'affichage de l'input
• Utiliser `console.log` avec les propriétés (title, amount, date) pour tracer et déboguer les données de formulaire
• La liaison bidirectionnelle est un concept clé du framework qui évite les boucles infinies grâce à sa gestion interne
• Elle est essentielle pour la gestion des formulaires car elle permet de collecter ET modifier les entrées utilisateur
• La liaison bidirectionnelle améliore l'expérience utilisateur en maintenant l'interface synchronisée avec l'état de l'application

Questions fréquentes

Qu'est-ce qu'une liaison bidirectionnelle dans un formulaire ?

C'est un mécanisme qui synchronise les données dans les deux directions : quand l'utilisateur modifie un champ d'entrée, l'état de l'application se met à jour automatiquement ; inversement, quand l'état change, l'affichage du champ d'entrée se met à jour pour refléter cette modification.

Comment ajouter une liaison bidirectionnelle à un input ?

Il faut utiliser l'attribut `value` sur l'élément d'entrée, par exemple `value={title}`, où `title` est une propriété de l'état. Cela crée la connexion qui synchronise l'input avec l'état.

Une liaison bidirectionnelle crée-t-elle une boucle infinie ?

Non, le framework gère internement cette situation pour éviter les boucles infinies. La mise à jour de l'état via l'input ne déclenche pas de cycle infini, même si l'input est mis à jour en retour.