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é...

Pour consulter la suite, découvrez le livre suivant :
couv_EIREA.png
60-signet.svg
En version papier
20-ecran_lettre.svg
En version numérique
41-logo_abonnement.svg
En illimité avec l'abonnement ENI
130-boutique.svg
Sur la boutique officielle ENI
Précédent
Conserver un état local dans le composant
Suivant
Requêtes Ajax et cycle de vie des composants React