Ajouter de l'interactivité avec l'état

Explorons comment React nous aide à ajouter de l'interactivité avec l'état et les gestionnaires d'événements.

Prenons l'exemple de la création d'un bouton "J'aime" dans votre composant HomePage. Tout d'abord, ajoutez un élément bouton dans l'instruction return() :

function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <button>Like</button>
    </div>
  );
}

Écouter les événements

Pour que le bouton fasse quelque chose lorsqu'il est cliqué, vous pouvez utiliser l'événement onClick :

function HomePage() {
  // ...
  return (
    <div>
      {/* ... */}
      <button onClick={}>Like</button>
    </div>
  );
}

Dans React, les noms d'événements sont en camelCase. L'événement onClick est l'un des nombreux événements que vous pouvez utiliser pour répondre aux interactions utilisateur. Par exemple, vous pouvez utiliser onChange pour les champs de saisie ou onSubmit pour les formulaires.

Gérer les événements

Vous pouvez définir une fonction pour "gérer" les événements lorsqu'ils sont déclenchés. Créez une fonction avant l'instruction return appelée handleClick() :

function HomePage() {
  // ...
 
  function handleClick() {
    console.log("incrémenter le compteur de likes")
  }
 
  return (
    <div>
      {/* ... */}
	  <button onClick={}>Like</button>
    </div>
     )
   }

Ensuite, vous pouvez appeler la fonction handleClick lorsque l'événement onClick est déclenché :

function HomePage() {
  // 	...
  function handleClick() {
    console.log('incrémenter le compteur de likes');
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Like</button>
    </div>
  );
}

Essayez d'exécuter ceci dans votre navigateur. Observez dans les outils de développement comment la sortie du log augmente.

État et hooks

React dispose d'un ensemble de fonctions appelées hooks. Les hooks vous permettent d'ajouter une logique supplémentaire comme l'état à vos composants. Vous pouvez considérer l'état comme toute information dans votre interface qui change au fil du temps, généralement déclenchée par une interaction utilisateur.

Vous pouvez utiliser l'état pour stocker et incrémenter le nombre de fois qu'un utilisateur a cliqué sur le bouton "J'aime". En fait, le hook React utilisé pour gérer l'état s'appelle : useState()

Ajoutez useState() à votre projet. Il retourne un tableau, et vous pouvez accéder et utiliser ces valeurs de tableau dans votre composant en utilisant la déstructuration de tableau :

function HomePage() {
  // ...
  const [] = React.useState();
 
  // ...
}

Le premier élément du tableau est la valeur de l'état, que vous pouvez nommer comme vous voulez. Il est recommandé de lui donner un nom descriptif :

function HomePage() {
  // ...
  const [likes] = React.useState();
 
  // ...
}

Le deuxième élément du tableau est une fonction pour mettre à jour la valeur. Vous pouvez nommer la fonction de mise à jour comme vous voulez, mais il est courant de la préfixer par set suivi du nom de la variable d'état que vous mettez à jour :

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState();
 
  // ...
}

Vous pouvez aussi en profiter pour ajouter la valeur initiale de votre état likes à 0 :

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
}

Ensuite, vous pouvez vérifier que l'état initial fonctionne en utilisant la variable d'état dans votre composant.

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
  // ...
 
  return (
    // ...
    <button onClick={handleClick}>Like({likes})</button>
  );
}

Enfin, vous pouvez appeler votre fonction de mise à jour d'état, setLikes dans votre composant HomePage, ajoutons-la dans la fonction handleClick() que vous avez définie précédemment :

function HomePage() {
  // ...
  const [likes, setLikes] = React.useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return (
    <div>
      {/* ... */}
      <button onClick={handleClick}>Likes ({likes})</button>
    </div>
  );
}

Cliquer sur le bouton appellera maintenant la fonction handleClick, qui appelle la fonction de mise à jour d'état setLikes avec un seul argument : le nombre actuel de likes + 1.

Remarque : Contrairement aux props qui sont passées aux composants comme premier paramètre de fonction, l'état est initialisé et stocké dans un composant. Vous pouvez passer les informations d'état aux composants enfants comme props, mais la logique de mise à jour de l'état doit rester dans le composant où l'état a été initialement créé.

Gérer l'état

Ceci n'était qu'une introduction à l'état, et il y a beaucoup plus à apprendre sur la gestion de l'état et le flux de données dans vos applications React. Pour en savoir plus, nous vous recommandons de consulter les sections Ajouter de l'interactivité et Gérer l'état dans la documentation React.

Ressources supplémentaires :

• État : La mémoire d'un composant
• Rencontrez votre premier hook
• Répondre aux événements