Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

L'essentiel de React.js

Découvrir les évènements

Testez gratuitement nos 1340 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
React dispose d'un panel d'évènements qui peuvent être appelés pour câbler des comportements de l'interface, découvrons comment s'y prendre.
04:29

Transcription

Maintenant qu’on a vu tout ça, on sait ce que sont les « states », on sait ce que sont les « props », on sait comment on applique du style, on aimerait bien pouvoir dynamiser un petit peu plus. Qu’est-ce que j’entends par dynamiser? Réagir avec React, réagir au clic. Par exemple, je vais cliquer sur le « h1 » et j’aimerais pouvoir changer le « name », dynamiquement. Attention, on va y aller étape par étape et je vais vous montrer ce qu’il faut faire et puis ce qu’il ne faut pas faire parce que sinon vous allez tâtonner tout seul et c’est très compliqué. On pourrait se dire « c’est facile, je connais le JavaScript donc je vais utiliser « onClick ». « OnClick », c’est bien parce que ça permet de définir une fonction à l’intérieur qui sera jouée, si vous avez déjà fait ça en JavaScript, c’est facile. Du coup, on pourrait se dire : « je suis sûr, il y a un composant, je vais lui attacher une fonction que je vais appeler ». Cette fonction je vais l’appeler « changeName ». Et que va-t-elle faire ? Puisque j’ai un « state » et qu’il est déjà attaché sur « this », je vais lui dire « this.state.name » est égal et je vais lui mettre autre chose, Toto, par exemple. Je me dis que pour appeler, je vais simplement lui donner la fonction à appeler, et ce sera largement suffisant. Si je recharge, on va me crier dessus. On va me dire que ça peut plus ou moins fonctionner mais, attention, parce qu’il faut que ce soit obligatoirement une fonction. Là ça ne marche pas. Concrètement, ça ne marche pas. Comment faire avec React ? La petite particularité, c’est qu'on est en JSX donc il va falloir aller chercher la fonction « this.changeName » sinon ça ne marchera pas. La deuxième particularité, c’est qu'il va falloir obligatoirement définir que cette fonction va agir sur ce composant. Pour ça vous devez l’attacher. Pour l’attacher, on va simplement faire un « this.changeName », comme ça, qui va être égal à « this.changeName » mais on va lui « binder » donc on va lui insérer le contexte, « this ». Si vous ne faites pas ça, non seulement ça ne marchera pas et c’est comme ça qu'on fait ! En React, il faut obligatoirement venir « binder » le composant sur lequel on est en train de travailler dans la fonction pour qu’elle puisse fonctionner et pour qu'au rendu, il y ait bien un lien qui se fasse et que le clic réagisse bien à la fonction. On va enregistrer, on va retourner dans le navigateur, cette fois-ci, plus de message d’erreur. Par contre, j’aurais beau cliquer sur mon titre, il ne se passera rien. Pourquoi ? Tout simplement parce que vous ne pouvez pas agir sur une propriété du « state » de cette façon. C’est absolument impossible, vous n’avez pas le droit de le faire, tout simplement parce qu'un « state » est isolé ou du moins protégé par de l’insertion abusive. Si vous voulez changer quelque chose dans le « state », il faudra obligatoirement utiliser une fonction existante dans les composants qui permette d’agir sur le « state ». Vous voyez bien que ce n’est pas juste un objet, c’est vraiment un objet de « state » attaché au composant ça a une vraie importance et ça a aussi un vrai nommage dans React. On ne s’amuse pas à avoir un objet comme ça à qui on ajoute des propriétés. La fonction à utiliser pour modifier quelque chose dans un « state », ce sera « setState ». C’est une fonction, je vous l’ai dit donc on va simplement ouvrir et fermer les parenthèses et l’écriture que vous devez connaître, pour le moment, c’est de lui redéfinir un objet à l’intérieur et de venir agir sur une propriété de l’objet. Pour nous, ça va être la propriété « name », à laquelle on va attacher « Toto ». On va transformer le « state » quand on aura cliqué, avant c’était Juju, maintenant ce sera Toto, On va enregistrer, on va retourner de l’autre côté, on va recharger la page et on va cliquer. Effectivement, on va bien modifié le « state » avec un événement. Vous voyez que ce n’est pas très compliqué d’agir sur le « state ». Par contre ça va demander un tout petit peu de code. Je récapitule les différentes étapes. D’abord on va définir qu’il y a une action qu’on effectue, on n'oublie pas de nommer avec « this », on va chercher la propriété, du moins la fonction qu’on va appeler directement avec « this », point, et la fonction. Une fois qu’on a fait ça, on crée cette fonction qui va agir sur le « state » avec « this.setState » pour modifier l’état du composant. Surtout, on n’oublie pas, dans le constructeur, de venir attacher le contexte à cette fonction sinon ça ne marchera pas. Alors si vous ne faites pas ça, tout simplement, je vais commenter ce qui va se passer : j’aurai beau cliquer, il ne se passera rien parce qu’on me dira : attention, il ne peut pas lire « setState » parce qu’il ne sait pas à quoi ça correspond. En fait, en venant « binder » « this », vous récupérez toutes les possibilités offertes par React dans cette fonctionnalité et, du coup, cette fonction va vous permettre de travailler notamment sur les « states ».

L'essentiel de React.js

Exploitez pleinement React.js ! Créez des composants web complexes rapidement, découvrez leurs relations ainsi que leurs cycles de vie, passez en revue la navigation, etc.

3h28 (49 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
React.js React.js 15.3.2
Spécial abonnés
Date de parution :27 oct. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !