Gestion des évènements

Nous avons vu une seule façon de gérer les codes asynchrones notamment à l'aide de useEffect. Ceci est particulièrement utile lorsque vous devez être réactif à la modification de vos données ou lorsque vous configurez ou supprimez un composant. Parfois, vous avez juste besoin de répondre à quelqu'un qui appuie sur un bouton. Ce n'est pas difficile à accomplir non plus. Faisons en sorte que chaque fois que quelqu'un appuie sur une des images, il change le nom de la crypto par le code en 3 lettres associé. Nous pouvons le faire en écoutant les événements du bouton.

Nous allons remplacer le div dans notre fichier Crypto.jsx par le composant <ImageBlock key={crypto.currency_long} crypto={crypto}/> . Nous allons mettre à jour le composant ImageBlock.jsx, dans lequel nous remplacerons le div initial par button. Nous aurions pu continuer d'utiliser le div, mais pour des soucis d'accessibité et parce que nous souhaitons créer une action qui est associée, nous avons choisi button.

import ImageBlock from "./ImageBlock";
import useGetImages from "./useGetImages";

const Crypto = ({searchValue}) => {
 const [status, cryptos] = useGetImages(searchValue)
  return (
    <div className="ListImageContainer">
      {status!== "loaded" && <div>Chargement....</div>}
      {status === "loaded" && cryptos.map((crypto) => (
          <ImageBlock key={crypto.currency_long} crypto={crypto}/>
      ))}
    </div>
  );
};
export default Crypto;

Nous allons mettre à jour le fichier ImageBlock.jsx. Nous remplacerons children par l'enfant qu'il contient, nous rajouter un gestionnaire d'état afin de savoir si le code est affiché ou non, et enfin, nous rajouterons une action sur le button.

import { useState } from "react";
const ImageBlock = ({ crypto }) => {
    const [isCode, setIsCode] = useState(false);
    return (
        <button className="imageWrapper" onClick={() => {setIsCode(!isCode);}}>
            <img src={crypto.link} alt={crypto.currency_long}/>
            <div style={{ fontWeight: "500" }}>
                {isCode ? crypto.currency_code : crypto.currency_long}
            </div>
        </button>
    );
};

export default ImageBlock;

Ce cours n'aborde pas toutes les manières de gérer les interactions des utilisateurs en JavaScript. Vous pouvez enregistrer des gestionnaires pour les actions avec la souris (cliquer la souris), touche haut, touche enfoncée, et peut même gérer des choses comme les événements copier-coller, la mise au point, le flou, etc. Voici une liste d'entre eux d'après les documents React.

Accéder au fichier du projet pour cette étape

Sélectionner un fichier