binding-bidirectionnel-react

Binding bidirectionnel React

Partagez

Le binding bidirectionnel en React permet de rafraichir un composant React afin qu’il affiche la valeur d’une variable au fur et Ă  mesure que celle-ci est modifiĂ©e. Cela ne se fait pas simplement en modifiant la valeur de cette variable. En effet, on va devoir utiliser un STATE pour pouvoir gĂ©rer ce binding bidirectionnel dans notre composant React.

Le State

Le State comme son nom l’indique est un Ă©tat ou plus prĂ©cisĂ©ment une classe javascript qui va pouvoir contenir des objets dont on veut changer et surveiller le changement de valeur ou d’Ă©tat afin que les composants qui les utilisent se rafraĂ®chissent automatiquement pour continuer d’afficher la dernière valeur de ces objets / variables.

Utiliser un state

Comme un state est surveillĂ© et que chaque modification dĂ©clenche le rafraĂ®chissement des composants React, ce state ne doit pas ĂŞtre utilisĂ© Ă  plusieurs endroits. Il est recommandĂ© de le centraliser dans l’App.js et donc dans notre composant principal.

Pour se faire, on va modifier un peu notre composant App.js qu’on avait créé dans nos prĂ©cĂ©dents tutos : “CrĂ©er un composant dans React” et “Passer des valeurs Ă  un composant React”.

Voici comment déclarer notre state:

import React, { useState } from 'react';
import...

function App() {
  
  const [articleState, setArticleState] = useState({
    articles:[
     {name:"Casquette", price:"20.00", description:"Casquette noire XL"},
     {name:"Basquettes", price:"40.00", description:"Basquettes bleues pour trail"}
  ]});

  return (
    <div className="App">
      <Article name={articleState.articles[0].name} price={articleState.articles[0].price}>{articleState.articles[0].description}</Article>
      <Article name={articleState.articles[1].name} price={articleState.articles[1].price}>{articleState.articles[1].description}</Article>
    </div>
  );
}

Pour utiliser le state, on va utiliser useState qui doit donc être importé depuis le package react via le nouvel import ci-dessus.

Vous pouvez Ă©galement voir ici qu’on dĂ©clare 2 constantes :

  • articleState qui reprĂ©sente notre objet state. Celui-ci va contenir notre liste d’articles.
  • setArticleState est une fonction retournĂ©e par useState pour permettre d’agir sur notre state (on verra cela dans la partie suivante).

On a donc un articleState qui contient nos articles. C’est donc lui qu’on va maintenant utiliser pour afficher nos articles d’oĂą le return qu’on a modifiĂ©.

Modifier les articles

Maintenant que nous savons comment afficher notre state, il est temps de passer au plus intéressant : pouvoir le modifier pour que les composants se rafraîchissent et affichent bien la modification dans notre résultat HTML.

Créons dans notre App.js une textbox pour modifier le nom de notre premier article:

return (
    <div className="App">
      Change name of article 1 : <input type="text" name="changeArticleName" onChange={changeArticleName} />
    ...
);

Ici rien de particulier, on a créé un input type TEXT et on lie l’Ă©vĂ©nement onChange Ă  une mĂ©thode changeArticleName() (sans les parenthèses car on ne veut pas exĂ©cuter maintenant la mĂ©thode mais bien la lier Ă  l’Ă©vĂ©nement).

Voici Ă  quoi va ressembler cette mĂ©thode (je remettrai le code complet en bas de l’article):

  const changeArticleName = event => {
    const modif = { ... articleState };
    modif.articles[0].name = event.target.value;
    setArticleState(modif);
  };

Dans cette mĂ©thode, on voit qu’on crĂ©e une copie de notre articleState car on ne peut pas le modifier directement sinon cela n’aura pas l’effet escomptĂ©. Pour se faire, on utilise l’opĂ©rateur “…”.

Ensuite, on modifie le nom de notre articles[0] en utilisant la valeur de notre textbox via event.target.value.

Enfin, on appelle la mĂ©thode qu’on a stockĂ©e dans setArticleState() au tout dĂ©but quand on a fait le useState(…). C’est de cette manière qu’on passe la modification et que l’interface se rafraĂ®chit toute seule.

En résumé

En résumé, voici le code complet de notre App.js:

import React, { useState } from 'react';
import './App.css';
import Article from './Article/Article';

function App() {
  
  const [articleState, setArticleState] = useState({
    articles:[
     {name:"Casquette", price:"20.00", description:"Casquette noire XL"},
     {name:"Basquettes", price:"40.00", description:"Basquettes bleues pour trail"}
  ]});

  const changeArticleName = event => {
    const modif = { ... articleState };
    modif.articles[0].name = event.target.value;
    setArticleState(modif);
  };

  return (
    <div className="App">
      Change name of article 1 : <input type="text" name="changeArticleName" onChange={changeArticleName} />
      <Article name={articleState.articles[0].name} price={articleState.articles[0].price}>{articleState.articles[0].description}</Article>
      <Article name={articleState.articles[1].name} price={articleState.articles[1].price}>{articleState.articles[1].description}</Article>
    </div>
  );
}

export default App;

On fait donc plusieurs choses pour utiliser les states:

  • import de useState
  • dĂ©claration de 2 constantes rĂ©sultant de l’appel Ă  useState() :
    • notre state qui va contenir nos donnĂ©es Ă  surveiller et mettre Ă  jour : articleState
    • une fonction permettant de modifier notre state : setArticleState
  • l’appel Ă  cette fonction setArticleState pour modifier nos objets et ainsi provoquer un rafraichissement dynamique de nos composants react -> ici via une textbox dont on s’abonne Ă  l’Ă©vĂ©nement onChange.

VoilĂ , une fois l’exercice fait de votre cĂ´tĂ©, vous verrez que cela devient facile et plus clair. Cela n’a rien de compliquĂ© mais il faut bien comprendre l’utilisation du state pour ce binding bidirectionnel.

J’espère que cet article vous aura plu. N’hĂ©sitez pas Ă  liker, commenter et partager cet article et Ă  vous abonner Ă  ce blog pour ne rien manquer. Je vous dis Ă  très bientĂ´t sur le blog “Developpement-web-facile.com“.

Publications similaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *