Binding bidirectionnel React

Juil 28, 2020 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“.

Laisser un commentaire

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

%d blogueurs aiment cette page :