Sommaire

Réagir aux actions et entrées de l’utilisateur Entrées

Créer un champ texte se fait de la manière la plus intuitive :

<input type="text" /> input

Supposons que l’on ait un attribut de notre state qui stocke la valeur à afficher dans le champ texte, et que cet attribut s’appelle taskLabel. On peut alors écrire :

<input type="text" value={this.state.taskLabel} />

Jusque-là tout va bien ; sauf que si vous lancez l’application avec un tel champ texte, vous aurez beau essayer de modifier la valeur du champ, celle-ci ne changera pas. D’ailleurs, React vous affichera un bel avertissement dans la console, vous suggérant d’ajouter une propriété onChange au champ. Eh oui, lorsque nous utilisons l’attribut value, cela indique à React que, quel que soit le contexte, la valeur du champ texte doit être celle spécifiée. Nous devons donc mettre à jour this.state.taskLabel dès que l’utilisateur essaie de modifier la valeur.

Nous avons vu dans la section précédente comment faire en sorte qu’un code soit exécuté lorsqu’un bouton est cliqué par l’utilisateur. React utilise en fait les évènements classiques du DOM, dans cet exemple l’évènement click. Gérer la modification d’un champ texte se fait de manière similaire avec l’évènement change, et donc la propriété ...