Basculer une classe au clic en React

par

Basculer une classe au clic en React #

Pour faire basculer une classe au clic dans React :

  1. Définissez l’option onClick sur l’élément.
  2. Stocke l’état actif dans une variable d’état.
  3. Ajouter conditionnellement la classe en utilisant un opérateur ternaire.
import {useState} from 'react';
import './App.css';

export default function App() {
  const [isActive, setIsActive] = useState(false);

  const handleClick = event => {
    
    setIsActive(current => !current);
  };

  return (
    <div>
      <button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}>
        Click
      </button>
    </div>
  );
}

Et voici le css pour l’exemple.

.bg-salmon {
  background-color: salmon;
  color: white;
}

basculer la classe au clic

Nous avons initialisé l’état de la classe isActive à false dans le crochet
crochet useState.

Nous définissons le onClick sur l’élément bouton, donc à chaque fois qu’il est cliqué,
le site handleClick est invoquée.

Dans notre handleClick nous basculons simplement la fonction isActive booléen.

Nous avons utilisé un
opérateur ternaire
pour ajouter conditionnellement la classe à l’élément.

<button className={isActive ? 'bg-salmon' : ''} onClick={handleClick}>
  Click
</button>

L’opérateur ternaire est très similaire à l’opérateur if/else déclaration.

Il vérifie si la valeur à gauche du point d’interrogation est véridique, et si c’est le cas, l’opérateur retourne la valeur à gauche du deux-points, sinon il retourne la valeur à droite.

En d’autres termes, si le isActive stocke un true nous ajoutons la variable
bg-salmon à l’élément, sinon nous retournons une chaîne vide.

Alternativement, vous pouvez utiliser la méthode classList.toggle() pour faire basculer une classe sur
un élément.

import './App.css';

export default function App() {
  const handleClick = event => {

    
    event.currentTarget.classList.toggle('bg-salmon');
  };

  return (
    <div>
      <button onClick={handleClick}>Click</button>
    </div>
  );
}

Nous pouvons accéder à l’élément via la méthode currentTarget de l’élément event
objet.

Le site currentTarget propriété sur le event nous permet d’accéder à l’élément auquel le
l’écouteur d’événement est attaché.

Alors que la méthode target propriété sur le event nous donne une référence à l’élément
qui a déclenché l’événement (il peut s’agir d’un descendant).

Le site
classList.toggle
supprime une classe existante de l’élément si cette classe est présente.
Sinon, elle ajoute la classe à l’élément.

Laisser un commentaire