Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel de React.js

Étudier l'interaction avec les propriétés

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Pour communiquer entre composants, il est souvent nécessaire de conserver de la logique dans le parent. Il s'agit également de faire interagir l'enfant avec son parent.
04:57

Transcription

On l'a vu tout à l'heure, au début de ce cours, les propriétés qu'on a déjà utilisées, comme cette propriété-là, « color», vont nous permettre de travailler sur de la configuration. Mais pas seulement. Vous allez voir qu'on peut également utiliser les propriétés pour passer de l'information. Je m'explique : j'ai besoin, dans mon « SearchComponent », de venir afficher l'information du « name ». Le « name », où se trouve-t-il ? On est un peu embêté parce qu'il se trouve ici et la fonction de « changeName » se trouve à cet endroit-là. Ça veut dire qu'il faudrait que je puisse venir agir également ici, sur mon « SearchComponent » en lui passant une information. Est-ce que je peux faire ça facilement ? Tout à fait ! Je peux mettre « change » est égal, comme ça, et puis je vais lui dire à cet endroit-là « this.state.name ». Je vais lui dire que si « change » est déclenché, je vais venir travailler dessus. Attention, il va falloir récupérer « change » de l'autre côté. Comment ? Je vais simplement venir agir très facilement puisque je vais définir un nouveau paragraphe et, à cet endroit-là, je vais lui dire que je veux afficher « this.props.change ». Ce n'est pas vraiment le bon nommage, on pourrait plutôt mettre « name » pour que ce soit plus logique et on pourrait injecter le « name » dans le « changeComponent ». Si on fait cela, ça veut dire que ça va être relié donc la propriété qu'il y a ici, va être affichée par rapport au parent, c'est-à-dire que le « name » qui est défini à cet endroit-là, va être le « name » qu'on a sur le parent et qui peut être modifié à tout moment. Vrai, effectivement. Si je teste maintenant dans mon interface, j'ai au début « Juju ». Mais si je clique, on est bien d'accord que le « state » doit changer. Ce qui fait que ça devrait se répercuter sur l'enfant. Effectivement, vous voyez qu'ici c'est très intéressant parce qu'on va avoir (je vais recharger la page) un maintien des valeurs. On peut faire de la communication depuis le parent vers l'enfant sans aucun problème. Pour cela, qu'utilise-t-on ? Les propriétés ! C'est intéressant mais on peut aller plus loin. Les propriétés vont également nous permettre de travailler sur de la remontée d'information, de l'autre côté. Je m'explique encore une fois. Si, quand je suis en train de remplir, j'ai envie de pouvoir remonter l'information pendant le « date », sur le parent et donc d'afficher l'information sur le parent. Alors on va se créer une nouvelle fonctionnalité et on va l'appeler « logValue ». Que va faire le « logValue » ? Il va faire un« console.log », comme ça, de la valeur qui va être remontée depuis l'enfant. Je vais mettre « value », puis comment je vais faire pour le câbler ? Il va falloir que j'appelle cette fonctionnalité dans l'enfant, au moment où je fais la mise à jour. Pour cela, je vais encore une fois utiliser des propriétés. Je vais appeler une propriété « change » ou alors carrément une propriété « onChange », là le nommage vous appartient. Ce qui fait qu'à cet endroit-là, je vais appeler la fonctionnalité que j'ai créée, qui s'appelle « logValue » et je vais lui mettre un petit « this.logValue ». Je relie le « onChange » au « logValue ». Maintenant, comment faire pour le faire fonctionner ? À cet endroit-là, je sais que dans les propriétés, sur les propriétés de mon composant, je vais récupérer « this.props », je vais récupérer « onChange ». Ça c'est une fonction puisque je l'ai définie ici. Le « onChange », regardez, est câblé sur mon « logValue », qui s'attend à une valeur pour faire le « console.log ». Puisque je l'ai passé par les propriétés, je peux sans aucun problème le réutiliser au-dessus, ici, et lui passer aussi la valeur « this.input.value ». En faisant ça vous venez de faire une communication dans les deux sens, ce qui fait que normalement, quand je tape ici, je devrais avoir quelque chose qui apparaît, à cet endroit-là. Ça, c'est la fonction en console qu'on a faite ensemble. Je récapitule : deux possibilités, soit vous passez directement une information, en propriété à un à un enfant, qui est juste une information qui existe à l'intérieur de votre parent et qui peut potentiellement être mise à jour. Et ça c'est intéressant, pourquoi ? Parce que cette valeur qui va être mise à jour, on va pouvoir l'afficher directement dans un composant enfant. Mieux que ça, on peut aussi câbler une fonction qui provient du parent que l'on va injecter par les propriétés, « onChange », j'utilise une fonction que j'ai définie sur mon parent et la réutilise puisqu'elle fait partie des « props ». Alors soit je fais de l'affichage pur, du « templating », soit je viens travailler sur le « this.props » et comme c'est une fonction, je peux tout à fait passer tout ce que je veux à l'intérieur. Pensez bien à ça, c'est important d'utiliser les propriétés, pas que pour faire de la configuration, mais pourquoi pas aussi pour faire de la communication intercomposant entre les composants, ce qui fait que je peux remonter ou injecter de l'information quand bon me semble.

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 !