Comment créer un Switch dans ReactJS ?

ReactJS est une bibliothèque JavaScript populaire pour créer des interfaces utilisateur qui offre un moyen efficace de développer des composants interactifs. Les commutateurs à bascule sont souvent utilisés pour permettre aux utilisateurs de basculer entre les thèmes du mode sombre et du mode clair dans les applications Web. Les bascules peuvent également être utilisées pour afficher ou masquer du contenu ou des parties spécifiques d’une page. Dans cet article, nous explorerons comment créer une bascule à l'aide de ReactJS.

Prérequis

Avant de poursuivre ce didacticiel, il est supposé que vous avez une compréhension de base de ReactJS et que vous avez configuré un environnement de développement avec Node.js et npm installés.

Configurez l'application React et installez les bibliothèques requises

Tout d’abord, créons une nouvelle application React à l’aide de Create React App. Ouvrez une invite de commande et exécutez la commande suivante :

npx create-react-app toggle-slider-switch

Cette commande créera un nouveau répertoire appelé "toggle-slider-switch" et y configurera une application React de base. Pour accéder au répertoire du projet, écrivez la commande suivante.

cd toggle-slider-switch

Étape 2 : Créer un composant ToggleSlider

Dans le répertoire src du projet, créez un nouveau fichier appelé ToggleSlider.js. Ce fichier contiendra notre code de composant de curseur à bascule. Ouvrez le fichier ToggleSlider.js dans votre éditeur de texte préféré et ajoutez le code suivant :

Exemple

Dans le code ci-dessous, nous avons importé le hook useState de React, qui nous permet de gérer l'état dans les composants fonctionnels. Nous définissons un composant ToggleSlider qui maintient l'état du commutateur à l'aide d'une variable cochée. La fonction handleToggle est responsable de la mise à jour de l'état lorsque le commutateur est cliqué.

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

const ToggleSlider = () => {
  const [checked, setChecked] = useState(false);

  const handleToggle = () => {
    setChecked(!checked);
  };

  return (
    <div className="toggle-slider">
      <input
        type="checkbox"
        id="toggle"
        checked={checked}
        onChange={handleToggle}
      />
      <label htmlFor="toggle" className="slider" />
    </div>
  );
};

export default ToggleSlider;

Étape 3 : Stylisez le curseur à bascule

Créez un nouveau fichier nommé ToggleSlider.css dans le même répertoire (src). Ajoutez le code CSS suivant pour styliser le curseur bascule :

Exemple

Dans le code ci-dessous, le code CSS stylise le curseur à bascule, y compris le commutateur et sa poignée de curseur. input[type='checkbox'] est masqué, nous utilisons l'étiquette pour déclencher l'effet de commutation.

.toggle-slider {
  position: relative;
  width: 60px;
  height: 34px;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  cursor: pointer;
  transition: 0.4s;
}

.slider:before {
  position: absolute;
  content: '';
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  border-radius: 50%;
  transition: 0.4s;
}

input[type='checkbox'] {
  display: none;
}

input[type='checkbox']:checked + .slider {
  background-color: #2196f3;
}

input[type='checkbox']:checked + .slider:before {
  transform: translateX(26px);
}

Étape 4 : Implémenter le composant ToggleSlider

Ensuite, modifions le fichier App.js dans le répertoire src pour inclure notre composant ToggleSlider. Ouvrez le fichier App.js et mettez à jour son contenu avec le code suivant

Exemple

Dans le code ci-dessous, nous importons le composant ToggleSlider et le restituons dans le composant App. Cela affichera notre curseur à bascule sur l'écran.

import React from 'react';
import ToggleSlider from './ToggleSlider';

const App = () => {
  return (
    <div className="app">
      <h1>Toggle Slider Example
      <ToggleSlider />
    </div>
  );
};

export default App;

Étape 5 : Exécutez l'application React

Nous pouvons maintenant exécuter notre application de commutateur à bascule. Dans l'invite de commande, assurez-vous que vous êtes dans le répertoire racine de votre projet (basculez le curseur). Exécutez la commande suivante pour démarrer le serveur de développement React :

Une fois le processus de compilation terminé, votre navigateur par défaut s'ouvrira et vous devriez voir le titre « Exemple de curseur à bascule » sur l'écran avec le curseur à bascule.

npm start

Étape 6 : Testez le curseur à bascule

Cliquer sur le curseur bascule fera basculer son statut et changera son apparence. L'état initial du composant ToggleSlider est défini sur "false", donc lorsque vous cliquez sur le curseur, il devient bleu, indiquant l'état "vrai". Cliquez à nouveau pour revenir à l'état initial.

Sortie

Conclusion

Dans cet article, nous avons expliqué comment créer un commutateur dans Reactjs. Nous avons couvert le processus étape par étape de configuration d'une application React, de création d'un composant de curseur à bascule, de style du curseur, d'implémentation du composant et d'exécution de l'application. En suivant ce guide, vous devriez maintenant disposer d'un commutateur à bascule de fonctionnalité dans votre application ReactJS, prêt pour une personnalisation et une intégration plus poussées dans votre projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!