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.