Créer un interrupteur à bascule dans React en tant que composant réutilisable

Dans cet article, nous allons créer un composant Toggle React d'inspiration inspiré par iOS. Ce sera un petit composant autonome que vous pourrez réutiliser dans les futurs projets. Au fur et à mesure que nous allons construire une application de réact de démonstration simple qui utilise notre composant de commutateur à bascule personnalisé.

Bien que nous puissions utiliser des bibliothèques tierces pour cela, la construction du composant à partir de zéro nous permet de mieux comprendre comment notre code fonctionne et nous permet de personnaliser complètement notre composant.

La case à cocher est traditionnellement utilisée pour collecter des données binaires, telles que oui ou non, vrai ou fausse, activer ou désactiver, sur ou désactiver, etc. Bien que certaines conceptions d'interface modernes évitent avec eux ici en raison de leur meilleure accessibilité.

Voici une capture d'écran du composant que nous construisons:

Les plats clés

• Utilisez Créer une application React pour configurer rapidement une nouvelle application React et créer un composant de commutateur de bascule inspiré par iOS réutilisable.
• Tirez parti des SCS pour coiffer l'interrupteur à bascule, en veillant à ce qu'il soit visuellement attrayant et s'aligne sur les normes de conception modernes.
• Implémentez le commutateur à bascule en tant que composant contrôlé dans React, en utilisant les accessoires pour gérer son état et son comportement dynamiquement.
• Améliorer l'accessibilité en rendant le clavier à bascule accessible et en utilisant des attributs ARIA appropriés.
• Utilisez des propypes pour la vérification du type dans le composant pour vous assurer que les données requises sont passées et sont du type correct.
• Explorez le thème et la réactivité avancés en incorporant les variables SCSS et les requêtes multimédias pour adapter l'apparence du commutateur à bascule sur différents appareils.

Étape 1 - Création de l'application React

Utilisons Create React App pour obtenir rapidement un composant REACT de commutateur à bascule en cours d'exécution. Si vous n'êtes pas familier avec Create React App, consultez notre guide de démarrage .

create-react-app toggleswitch

Une fois que tout a été installé, passez dans le répertoire nouvellement créé et démarrez le serveur avec le démarrage du fil (ou NPM Démarrer si vous préférez). Cela démarrera le serveur de développement à http: // localhost: 3000 .

Ensuite, créez un répertoire TogglesWitch dans le répertoire SRC. C'est là que nous ferons notre composant:

mkdir src/ToggleSwitch

Dans ce répertoire, faites deux fichiers: toggleswitch.js et toggleswitch.scss:

touch ToggleSwitch.js ToggleSwitch.scss

Enfin, modifier les app.js comme suit:

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

function App() {
  return (
    <ToggleSwitch />
  );
}

export default App;

Étape 2 - Le balisage

Nous pouvons démarrer par configurer un élément de base de base de base HTML à cocher HTML pour notre composant Toggle React avec ses propriétés nécessaires.

create-react-app toggleswitch

Ensuite, ajoutez une balise

Enclosing autour de lui et une balise Juste en dessous de la balise pour créer une étiquette disant, basculez-moi!

mkdir src/ToggleSwitch

ajoutant tout, vous devriez obtenir quelque chose comme ceci:

Nous pouvons également nous débarrasser du texte de l'étiquette et utiliser la balise elle-même pour cocher ou décocher le contrôle d'entrée de la case à cocher. Pour cela, ajoutez deux balises à l'intérieur de la balise pour construire le support de commutateur et le commutateur de basculement:

touch ToggleSwitch.js ToggleSwitch.scss

Étape 3 - Conversion en composant de réaction

Maintenant que nous savons ce qui doit aller dans le HTML, tout ce que nous devons faire est de convertir le HTML en un composant React. Commençons par un composant de base ici. Nous en ferons un composant de classe, puis nous le convertirons en crochets, car il est plus facile pour les nouveaux développeurs de suivre l'état que USESTATE lors de la construction d'un bouton d'interrupteur React.

Ajoutez ce qui suit au fichier src / toggleswitch / toggleswitch.js que nous avons créé à l'étape 1.

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

function App() {
  return (
    <ToggleSwitch />
  );
}

export default App;

À ce stade, il n'est pas possible d'avoir plusieurs curseurs de commutation à bascule sur la même vue ou la même page en raison de la répétition des ID. Bien que nous puissions tirer parti du mode de composontisation de React ici, nous utiliserons accessoires pour remplir dynamiquement les valeurs:

<input type="checkbox" name="name"  />

le this.props.nom remplira les valeurs de l'ID, du nom et pour (notez qu'il est htmlfor dans React JS) dynamiquement, afin que vous puissiez transmettre différentes valeurs au composant et avoir plusieurs instances sur la même page.

Si vous l'avez remarqué, la balise n'a pas de balise de fin . Au lieu de cela, il est fermé dans la balise de départ comme , qui est complètement bien dans jsx .

Vous pouvez tester ce composant en mettant à jour l'application.js avec le code ci-dessous.

<div >
  <input type="checkbox"  name="toggleSwitch"  />
  <label  for="toggleSwitch">
    Toggle Me!
  </label>
</div>

Inspectez la sortie sur http: // localhost: 3000 / (éventuellement utiliser les outils de développement de votre navigateur) et assurez-vous que tout fonctionne correctement.

Étape 4 - Style et SCSS

J'ai récemment écrit sur Styling React Composants , où j'ai comparé les différentes façons possibles. Dans cet article, j'ai conclu que SCSS est la meilleure méthode, et c'est ce que nous utiliserons ici.

Pour que SCSS fonctionne avec Create React App, vous devrez installer le package SASS .

Remarque : Auparavant, de nombreux développeurs ont utilisé nœud-sass pour cela. Mais, la bibliothèque Node-Sass a maintenant été obsolète et il est recommandé d'utiliser SASS ou Sass-Embedded .

<div >
  <input type="checkbox"  name="toggleSwitch"  />
  <label  for="toggleSwitch">
    <span ></span>
    <span ></span>
  </label>
</div>

Nous devrons également importer le fichier correct dans notre composant:

create-react-app toggleswitch

maintenant pour le style. Ceci est un aperçu approximatif de ce que nous recherchons pour le style de notre bouton REACT SWITCH.

• Par défaut, le commutateur ne mesure que 75px de large et est aligné verticalement dans un bloc en ligne afin qu'il soit en ligne avec le texte et ne provoque pas de problèmes de mise en page.
• Nous nous assurerons que le contrôle n'est pas sélectionnable afin que les utilisateurs ne puissent pas glisser et le supprimer.
• Nous allons cacher l'entrée de la case à cocher d'origine.
• à la fois le :: After et :: avant les pseudo-éléments doivent être stylisés et transformés en éléments pour les mettre dans le DOM et les coiffer.
• Nous allons également ajouter des transitions CSS pour un effet animé cool.

Et c'est à quoi cela ressemble dans SCSS. Ajoutez ce qui suit à src / toggleswitch / toggleswitch.scss:

mkdir src/ToggleSwitch

Maintenant, exécutez à nouveau le serveur à http: // localhost: 3000 / , et vous verrez quatre commutateurs à bascule bien coiffés. Essayez de les basculer; Ils devraient tous travailler.

Aussi, prenez un certain temps pour passer par le code ci-dessus. S'il y a quelque chose dont vous n'êtes pas sûr, vous pouvez consulter la documentation SASS , ou poser une question sur le Forums SitePoint .

Étiquettes dynamiques

Actuellement, les options de bascule sont codées en dur:

touch ToggleSwitch.js ToggleSwitch.scss

Pour rendre le composant plus flexible, nous pouvons les saisir dynamiquement à partir du contrôle en utilisant HTML5 Data-Attributes :

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

function App() {
  return (
    <ToggleSwitch />
  );
}

export default App;

Nous coderons en dur les attributs de données pour les tests, mais le rendrons plus flexible dans la version finale:

<input type="checkbox" name="name"  />

Si vous exécutez l'application, vous devriez voir quelque chose comme ceci:

Étape 6 - Création d'une version de composante plus petite

De plus, l'utilisation d'une version plus petite du composant Switch réagit sans le texte pour les écrans plus petits serait une excellente idée. Ajoutons donc le style avec quelques tailles minimales et supprimons le texte:

<div >
  <input type="checkbox"  name="toggleSwitch"  />
  <label  for="toggleSwitch">
    Toggle Me!
  </label>
</div>

En ce qui concerne la réactivité, nous devons modifier la taille complète, alors utilisons la fonction d'échelle CSS. Ici, nous avons couvert toutes les largeurs réactives basées sur le bootstrap des appareils.

<div >
  <input type="checkbox"  name="toggleSwitch"  />
  <label  for="toggleSwitch">
    <span ></span>
    <span ></span>
  </label>
</div>

Vous pouvez tester ces modifications en ajoutant la classe de petit interrupteur à l'élément parent dans toggleswitch.js:

import React, { Component } from "react";

class ToggleSwitch extends Component {
  render() {
    return (
      <div className="toggle-switch">
        <input
          type="checkbox"
          className="toggle-switch-checkbox"
          name="toggleSwitch"
          
        />
        <label className="toggle-switch-label" htmlFor="toggleSwitch">
          <span className="toggle-switch-inner" />
          <span className="toggle-switch-switch" />
        </label>
      </div>
    );
  }
}

export default ToggleSwitch;

Retournez sur le serveur de développement et testez vos modifications. Si vous souhaitez vérifier ce que vous avez contre le fichier SCSS fini, , vous pouvez trouver cela ici .

Étape 6 - Le thème dans SCSS

Étant donné que nous pouvons utiliser des variables dans SCSS, il est plus facile d'ajouter la prise en charge de plusieurs thèmes de couleurs. Vous pouvez en savoir plus à ce sujet dans " Sass Theming: The Never Ending Story ". Nous utiliserons ici des thèmes de couleurs et changerons toutes les couleurs brutes en variables. Les trois premières lignes sont un ensemble de couleurs configurables, qui nous aide à thème notre petit contrôle:

create-react-app toggleswitch

Et c'est tout avec le style. Ajoutons maintenant une certaine interactivité.

Étape 7 - Interactions et javascript

Veuillez noter que la section suivante ne contient que du code de démonstration pour expliquer les concepts. Vous ne devez pas mettre à jour votre composant Toggleswitch réel dans cette section.

Notre composant de base sera un composant stupide (ou composant de présentation) dont l'état sera contrôlé par un composant parent ou un conteneur, comme une forme. Qu'entendons-nous par contrôlé? Eh bien, regardons d'abord une version incontrôlée:

mkdir src/ToggleSwitch

Lorsque les utilisateurs interagissent avec l'entrée de case à cocher ci-dessus, il basculera entre un état coché et incontrôlé de son propre accord sans que nous ayons à écrire un javascript. Les éléments d'entrée HTML peuvent gérer leur propre état interne en mettant directement le DOM directement.

Cependant, dans React, il est recommandé que nous utilisons composants contrôlés , comme indiqué dans l'exemple suivant:

touch ToggleSwitch.js ToggleSwitch.scss

Ici, React contrôle l'état de l'entrée de la case à cocher. Toutes les interactions avec cette entrée doivent passer par le DOM virtuel. Si vous essayez d'interagir avec le composant tel qu'il est, rien ne se passera, car nous n'avons défini aucun code JavaScript qui peut modifier la valeur de l'accessoire vérifié que nous transmettons.

Pour résoudre ce problème, nous pouvons passer dans un accessoire Onchange - une fonction à appeler chaque fois que la case est cliquée:

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

function App() {
  return (
    <ToggleSwitch />
  );
}

export default App;

Maintenant, l'entrée de la case à cocher est interactive. Les utilisateurs peuvent basculer le composant «ON» et «OFF» comme avant. La seule différence ici est que l'État est contrôlé par React, par opposition à la version non contrôlée précédente. Cela nous permet d'accéder facilement à l'état de notre composant à tout moment via JavaScript. Nous pouvons également définir facilement la valeur initiale lors de la déclaration du composant.

Maintenant, regardons comment nous pouvons l'utiliser dans le composant TogglesWitch. Vous trouverez ci-dessous un exemple de classe simplifié:

<input type="checkbox" name="name"  />

Maintenant, convertissons le composant basé sur la classe en un composant fonctionnel à l'aide de crochets:

<div >
  <input type="checkbox"  name="toggleSwitch"  />
  <label  for="toggleSwitch">
    Toggle Me!
  </label>
</div>

Comme vous pouvez le voir, nous avons considérablement réduit le nombre de lignes en utilisant des composants fonctionnels et la méthode de création de crochets.

Si les crochets React sont nouveaux pour vous, " React Hooks: Comment démarrer et construire votre propre ".

Étape 8 - Finalisation du composant TogglesWitch

Maintenant, revenons à notre composant Toggleswitch. Nous aurons besoin des accessoires suivants:

• ID (requis): Il s'agit de l'ID qui sera transmis au contrôle d'entrée de la case à cocher. Sans cela, le composant ne rendra pas.
• Vérifié (obligatoire): Cela conservera l'état actuel, qui sera une valeur booléenne.
• onChange (requis): Cette fonction sera appelée lorsque le gestionnaire d'événements OnChange de l'entrée sera déclenché.
• Nom (facultatif): Ce sera le texte de l'étiquette de l'entrée de la case à cocher, mais nous ne l'utiliserons généralement pas.
• Small (facultatif): Cette valeur booléenne rend l'interrupteur à bascule dans un petit mode sans rendre le texte.
• OptionLabels (facultatif): Si vous n'utilisez pas la petite version du contrôle, vous devrez peut-être passer cela au commutateur à bascule en tant que tableau de deux valeurs, ce qui signifie le texte pour True et False. Un exemple serait text = {[«oui», «non»]}.
• Désactivé (facultatif): Ceci sera directement transmis à la boîte à cocher

Lorsque la petite version n'est pas utilisée, le texte d'optionLabels suivant sera utilisé par défaut:

create-react-app toggleswitch

Étant donné que la plupart des accessoires doivent être définis par l'utilisateur et que nous ne pouvons pas utiliser de valeurs arbitraires, il est toujours préférable d'arrêter de rendu si les accessoires requis ne sont pas passés. Cela peut être fait en utilisant un simple javascript si déclaration ou un opérateur ternaire en utilisant? : Ou un court-circuit &&:

mkdir src/ToggleSwitch

À mesure que notre application se développe, nous pouvons attraper de nombreux bogues en vérifiant le type. React a des capacités de vérification de type intégrées. Pour exécuter le type de vérification des accessoires pour un composant, vous pouvez affecter la propriété Propypes spéciale. Nous pouvons appliquer la liste ci-dessus des accessoires à l'aide de la bibliothèque de React

propype , une bibliothèque distincte qui exporte une gamme de validateurs qui peuvent être utilisés pour garantir que les données que vous recevez sont valides.

Vous pouvez l'installer comme:

touch ToggleSwitch.js ToggleSwitch.scss

Ensuite, importez la bibliothèque propypes en utilisant:

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

function App() {
  return (
    <ToggleSwitch />
  );
}

export default App;

Nous allons définir les propypes de la manière suivante:

<input type="checkbox" name="name"  />

par explication:

propypes.string.isquequure: il s'agit d'une valeur de chaîne, et elle est requise et obligatoire.
propypes.string: c'est une valeur de chaîne, mais ce n'est pas obligatoire.
propypes.func: Cet access
• propypes.bool: c'est une valeur booléenne, mais ce n'est pas obligatoire.
• propypes.array: il s'agit d'une valeur de tableau, mais ce n'est pas obligatoire.
Maintenant, nous pouvons continuer avec le composant Toggleswitch. Remplacez le contenu de Src / TogglesWitch / TogglesWitch.js par les suivants:

Enfin, pour tester le composant, mettez à jour l'application.js avec le code ci-dessous:

<div >
  <input type="checkbox"  name="toggleSwitch"  />
  <label  for="toggleSwitch">
    Toggle Me!
  </label>
</div>

create-react-app toggleswitch

Maintenant, lorsque vous vous dirigez vers http: // localhost: 3000 / , vous devriez voir la bascule de travail.

Bouton de bascule de travail

Étape 9 - Rendre le clavier du composant accessible

La dernière étape consiste à rendre notre clavier de composant accessible. Pour ce faire, modifiez d'abord l'étiquette comme ci-dessous:

mkdir src/ToggleSwitch

Comme vous pouvez le voir, nous avons ajouté une propriété Tabindex, que nous définissons à 1 (focalisable) ou -1 (non focalisable), selon que le composant est actuellement désactivé.

Nous avons également déclaré une fonction HandlekeyPress pour le faire en réception de l'entrée du clavier:

touch ToggleSwitch.js ToggleSwitch.scss

Cela vérifie si la touche appuyée est la barre d'espace. Si c'est le cas, il empêche l'action par défaut du navigateur (faites défiler la page dans ce cas) et bascule l'état du composant.

Et c'est essentiellement tout ce dont vous avez besoin. Le composant est désormais accessible au clavier.

Cependant, il y a un léger problème. Si vous cliquez sur le composant TogglesWitch, vous obtiendrez un aperçu de l'ensemble du composant, ce qui n'est probablement pas souhaité. Pour lutter contre cela, nous pouvons modifier légèrement les choses pour nous assurer qu'il reçoit un contour lorsqu'il est axé sur le clavier, mais pas lorsqu'il est cliqué:

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

function App() {
  return (
    <ToggleSwitch />
  );
}

export default App;

Ici, nous avons ajouté une propriété Tabindex aux deux éléments intérieurs pour nous assurer qu'ils ne peuvent pas recevoir de focus.

Ensuite, mettez à jour le fichier toggleswitch.scss avec le code ci-dessous pour appliquer un style à l'élément intérieur de TogglesWitch lorsqu'il est concentré sur le clavier mais pas lorsqu'il est cliqué.

<input type="checkbox" name="name"  />

Vous pouvez en savoir plus sur cette technique ici . Il est légèrement hacky et devrait être abandonné en faveur de en utilisant: focus-visible , dès que cela gagne un support de navigateur suffisamment large.

Lorsque vous exécutez l'application, vous devriez pouvoir basculer le composant en utilisant la barre d'espace.

bascule accessible au clavier

un exemple plus complet

Pour terminer, je voudrais démontrer un exemple plus complet de l'utilisation du composant TogglesWitch dans la boîte de codes et boîte.

Cette démo utilise plusieurs composants Toggleswitch sur la même page. L'état des trois derniers bascules dépend de l'état du premier. Autrement dit, vous devez accepter les e-mails marketing avant de pouvoir affiner votre choix de ceux à recevoir.

Résumé

Dans cet article, j'ai montré comment créer un composant REACT TOGGLE réutilisable inspiré par iOS à l'aide de React. Nous avons examiné le style du composant avec SCSS, ce qui en fait un composant contrôlé, le personnalisant en le faisant passer des accessoires et en le rendant accessible au clavier.

Vous pouvez trouver le code complet du composant de bascule React sur notre github Repo .

FAQS sur la façon de créer un commutateur à bascule dans React en tant que composant réutilisable

Comment puis-je personnaliser l'apparence de mon commutateur de bascule de réaction?

La personnalisation de l'apparence de votre interrupteur de bascule React est assez simple. Vous pouvez modifier les propriétés CSS en fonction de vos besoins de conception. Par exemple, vous pouvez modifier la couleur d'arrière-plan du commutateur, la couleur de la bordure, la taille et la forme. Vous pouvez également ajouter des animations ou des transitions pour une expérience utilisateur plus interactive. N'oubliez pas de garder vos modifications cohérentes avec la conception globale de votre application pour une expérience utilisateur transparente.

Puis-je utiliser le composant REACT du bouton de commutateur avec des composants fonctionnels?

Oui, vous pouvez utiliser le commutateur de bascule React avec des composants fonctionnels. Le processus est similaire à l'utiliser avec des composants de classe. Il vous suffit d'importer et d'utiliser le composant Switch dans votre composant fonctionnel. Vous pouvez également utiliser des crochets comme UseState pour gérer l'état du commutateur.

Comment puis-je rendre accessible mon bouton de commutateur accessible?

L'accessibilité est un aspect crucial du développement Web. Pour rendre votre commutateur à bascule React accessible, vous pouvez utiliser des attributs Aria (applications Internet riches accessibles). Par exemple, vous pouvez utiliser l'attribut «aria-coché» pour indiquer l'état du commutateur. Vous pouvez également ajouter une prise en charge du clavier pour permettre aux utilisateurs de basculer le commutateur à l'aide du clavier.

Comment puis-je tester mon composant de commutateur React?

Les tests sont une partie essentielle du processus de développement. Vous pouvez utiliser des bibliothèques de test comme Jest and React Testing Library pour tester votre composant React Switch. Vous pouvez rédiger des tests pour vérifier si le commutateur baisse et rend correctement le clic et gère correctement les accessoires.

Puis-je utiliser le commutateur de bascule React avec redux?

Oui, vous pouvez utiliser le commutateur de bascule React avec Redux. Vous pouvez gérer l'état du commutateur à l'aide d'actions et de réducteurs Redux. Cela peut être particulièrement utile si l'état du commutateur doit être partagé sur plusieurs composants ou s'il affecte l'état global de votre application.

Comment puis-je ajouter une étiquette à mon commutateur de bascule React?

L'ajout d'une étiquette à votre interrupteur de bascule React peut améliorer sa convivialité. Vous pouvez ajouter une étiquette en enveloppe le composant de commutateur React dans un élément «étiquette». Vous pouvez également utiliser l'attribut «htmlfor» pour associer l'étiquette à l'interrupteur.

Comment puis-je gérer les erreurs dans mon composant de commutateur de bascule React?

La gestion des erreurs est une partie importante de tout composant. Dans votre composant REACT TOGGLE STANT, vous pouvez utiliser des blocs de capture d'essai pour gérer les erreurs. Vous pouvez également utiliser les limites d'erreur, une fonction de réact qui attrape et gère les erreurs dans les composants.

Puis-je utiliser le commutateur de bascule React sous une forme?

Oui, vous pouvez utiliser le commutateur de bascule React sous un formulaire. Vous pouvez gérer l'état de l'interrupteur à l'état du formulaire. Vous pouvez également gérer la soumission du formulaire et utiliser l'état du commutateur pour effectuer certaines actions.

Comment puis-je animer mon commutateur de bascule React?

L'animation de votre commutateur à bascule React peut améliorer l'expérience utilisateur. Vous pouvez utiliser des transitions ou des animations CSS pour animer le commutateur, ou vous pouvez utiliser des bibliothèques comme React Spring pour des animations plus complexes.

Puis-je utiliser le commutateur de bascule React avec TypeScript?

Oui, vous pouvez utiliser le commutateur de bascule React avec TypeScript. Il vous suffit de définir les types d'accessoires et l'état du commutateur. Cela peut vous aider à prendre des erreurs pendant le développement et à rendre votre code plus robuste et maintenable.

Comment puis-je optimiser les performances des bascules de commutation?

Vous pouvez optimiser les performances de votre interrupteur de basculement React en utilisant la fonction de mémo de React pour éviter les redesseurs inutiles.

Comment puis-je gérer la gestion de l'État pour plusieurs commutateurs à bascule sous une seule forme?

Vous pouvez gérer l'état de plusieurs commutateurs à bascule sous une seule forme en utilisant un objet pour stocker l'état de chaque commutateur. Cela vous permet de mettre à jour et d'accéder facilement à l'état de chaque commutateur, ce qui rend votre gestion de formulaire plus efficace.

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!