article(s) dans votre panier VOIR

Gestion du state et des inputs

  • Vidéo 26 sur 36
  • 2h55 de formation
  • 36 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Gestion du state et des inputs
00:00 / 08:33
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
39,90€
  • Téléchargement + VOD à vie
  • Accès uniquement à cette formation

Sommaire de la formation

Détails de la formation

Dans ce tutoriel en ligne sur ReactJS, Guillaume Larivière vous montre la gestion du state et des inputs. L’objectif de ce cours est de gérer l’interaction de l’utilisateur avec un champ de text du TweetBox. Pour commencer, vous allez dans le script TweetBox, puis vous ajoutez une variable d’état que vous nommez value. Pour y parvenir, vous entrez l’instruction state={ value :’’} ;. Tandis que dans la fonction render, vous déclarez value comme une constante. Cette action faite, vous surveillez le state en implémentant le code handle.Change=({target : {value}}) => {this.setState({value}) ;} ;, dans cette situation, l’accesseur this est indispensable vu que vous tentez d’accéder à des propriétés d’objet par l’intermédiaire du setter setState. Le rôle du setState consiste à modifier le state en fonction des inputs. Vous basculez ensuite dans la méthode render () et vous retournez le JSX qui affiche la lettre écrite dans le TweetBox. Afin d’y parvenir, vous écrivez . Le JSX implémenté ci-dessous est une zone de text où vous éditez le contenu du tweet à afficher. La valeur qui s’affiche se trouve dans l’attribut value et les changements de la valeur à prendre en compte sont dans l’attribut onchange. Pour mieux observer le déroulement du processus, vous allez afficher un rapport de console à l’aide de l’instruction console.log(‘render’) ;. En notant que ce rapport s’affiche à chaque matérialisation. Vous vérifiez ensuite le résultat en basculant dans le navigateur. Vous observez après dans la console du mode développeur le rapport render qui s’affiche à chaque fois que vous entrez une lettre dans la zone de texte. Pour conclure, cette formation vous a montré comment éditer une TweetBox en vous aidant des states et des inputs avec ReactJS.