Case à cocher Maîtriser React : un guide complet

Une case à cocher React n’est pas seulement une entrée de base ; c'est un outil polyvalent pour ajouter de l'interactivité aux formulaires. React facilite la gestion de l'état d'une case à cocher, vous permettant de capturer les sélections de l'utilisateur et de basculer facilement les options. Dans ce guide, nous aborderons le rendu des cases à cocher dans JSX, la gestion de l'état et la personnalisation des fonctionnalités pour créer des formulaires attrayants et réactifs.

Créer une case à cocher React

Commençons par créer une case à cocher de base sans aucun état, puis nous ajouterons un état pour la rendre interactive et discuterons des avantages.

Étape 1 : Création d'une case à cocher de base dans React

À la base, une case à cocher React est simplement un élément d'entrée avec l'attribut type défini sur "checkbox". Voici comment créer une case à cocher de base dans React sans aucun état :

import React from 'react';

function App() {
  return (
    <div>
      <label>
        <input type="checkbox" />
        Accept Terms and Conditions
      </label>
    </div>
  );
}

export default App;

Dans cette configuration, nous affichons une case à cocher avec une étiquette. Bien qu'il apparaisse dans l'interface utilisateur, il n'est pas fonctionnel d'une manière spécifique à React, car il ne lui manque aucun état pour savoir s'il est coché ou décoché.

Étape 2 : ajout d'un état à la case à cocher

Pour rendre la case à cocher fonctionnelle, nous devrons ajouter un état. Le hook useState de React nous permet de gérer l'état de cette case à cocher et de savoir si elle est cochée. Voici comment nous pouvons l'ajouter :

import React, { useState } from 'react';
function App() {
  const [isChecked, setIsChecked] = useState(false);
  const handleCheckboxChange = () => {
    setIsChecked(!isChecked);
  };
  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={isChecked}
          onChange={handleCheckboxChange}
        />
        Accept Terms and Conditions
      </label>
      <p>{isChecked ? "Checkbox is checked" : "Checkbox is unchecked"}</p>
    </div>
  );
}
export default App;

Mais pourquoi avons-nous ajouté un État ?

Avec l'état, nous obtenons un contrôle total sur le comportement de la case à cocher :

• Nous pouvons déterminer s'il est coché ou décoché en fonction de isChecked.
• En suivant cet état, nous pouvons mettre à jour dynamiquement d'autres parties de l'interface utilisateur en fonction de l'état de la case à cocher. Dans cet exemple, un message indique si la case est cochée ou non.
• Cette approche est utile pour les formulaires, les bascules et les éléments interactifs où l'application doit répondre aux entrées de l'utilisateur.

Étape 3 : Création d'un composant de case à cocher React réutilisable

Enfin, convertissons cette fonctionnalité en un composant de case à cocher réutilisable qui peut être personnalisé dans l'application.

import React, { useState } from 'react';


// Reusable Checkbox Component
function Checkbox({ label, onChange }) {
  const [isChecked, setIsChecked] = useState(false);


  const handleChange = () => {
    setIsChecked(!isChecked);
    onChange(!isChecked); // Pass the updated state to the parent component
  };


  return (
    <label>
      <input
        type="checkbox"
        checked={isChecked}
        onChange={handleChange}
      />
      {label}
    </label>
  );
}


// Using the Reusable Checkbox Component
function App() {
  const handleCheckboxState = (state) => {
    console.log('Checkbox State:', state);
  };


  return (
    <div>
      <Checkbox label="Accept Terms and Conditions" onChange={handleCheckboxState} />
    </div>
  );
}


export default App;

Case à cocher React personnalisée à l'aide de l'interface utilisateur matérielle

Material UI (MUI) fournit un composant Checkbox polyvalent qui nous permet d'aller au-delà du style par défaut et d'adapter la case à cocher aux besoins de conception spécifiques de notre projet. Avec MUI, nous pouvons facilement modifier les couleurs, ajouter des icônes et ajuster les styles, tout en conservant des fonctionnalités cohérentes.

Cases à cocher de base

Créer une case à cocher de base dans React est simple mais essentiel pour capturer les entrées de l'utilisateur. En utilisant l'état de React, nous pouvons contrôler s'il est coché ou décoché.

import React from 'react';

function App() {
  return (
    <div>
      <label>
        <input type="checkbox" />
        Accept Terms and Conditions
      </label>
    </div>
  );
}

export default App;

Étiquette

Pour ajouter une étiquette à la case à cocher, vous pouvez utiliser le composant FormControlLabel de Material UI. Cela vous permet d'afficher facilement du texte à côté de la case à cocher, améliorant ainsi la clarté et l'accessibilité pour les utilisateurs.

import React, { useState } from 'react';
function App() {
  const [isChecked, setIsChecked] = useState(false);
  const handleCheckboxChange = () => {
    setIsChecked(!isChecked);
  };
  return (
    <div>
      <label>
        <input
          type="checkbox"
          checked={isChecked}
          onChange={handleCheckboxChange}
        />
        Accept Terms and Conditions
      </label>
      <p>{isChecked ? "Checkbox is checked" : "Checkbox is unchecked"}</p>
    </div>
  );
}
export default App;

Taille

Pour ajuster la taille de la case à cocher, vous pouvez utiliser l'accessoire size ou personnaliser la taille de la police des icônes SVG dans la case à cocher. Cela vous permet d'adapter la taille de la case à cocher à votre conception, la rendant plus adaptable à différentes mises en page.

import React, { useState } from 'react';


// Reusable Checkbox Component
function Checkbox({ label, onChange }) {
  const [isChecked, setIsChecked] = useState(false);


  const handleChange = () => {
    setIsChecked(!isChecked);
    onChange(!isChecked); // Pass the updated state to the parent component
  };


  return (
    <label>
      <input
        type="checkbox"
        checked={isChecked}
        onChange={handleChange}
      />
      {label}
    </label>
  );
}


// Using the Reusable Checkbox Component
function App() {
  const handleCheckboxState = (state) => {
    console.log('Checkbox State:', state);
  };


  return (
    <div>
      <Checkbox label="Accept Terms and Conditions" onChange={handleCheckboxState} />
    </div>
  );
}


export default App;

Icône

Personnalisez l'apparence de la case à cocher en modifiant ses icônes par défaut. Avec les accessoires icon et checkIcon, vous pouvez remplacer l'icône de case à cocher standard par n'importe quelle icône SVG ou Material UI personnalisée.

import * as React from 'react';
import Checkbox from '@mui/material/Checkbox';


const label = { inputProps: { 'aria-label': 'Checkbox demo' } };


export default function Checkboxes() {
  return (
    <div>
      <Checkbox {...label} defaultChecked />
      <Checkbox {...label} />
      <Checkbox {...label} disabled />
      <Checkbox {...label} disabled checked />
    </div>
  );
}

Indéterminé

Dans les formulaires, une case à cocher a généralement deux états : cochée ou décochée. Cependant, visuellement, il existe un troisième état – indéterminé – utile pour indiquer une sélection partielle (comme lorsque seuls certains éléments d'une liste sont sélectionnés). Vous pouvez définir une case à cocher sur l'état indéterminé avec la prop indeterminate et personnaliser son apparence à l'aide de la prop indeterminateIcon, permettant ainsi aux utilisateurs de comprendre plus facilement les sélections partielles.

import * as React from 'react';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Checkbox from '@mui/material/Checkbox';


export default function CheckboxLabels() {
  return (
    <FormGroup>
      <FormControlLabel control={<Checkbox defaultChecked />} label="Label" />
      <FormControlLabel required control={<Checkbox />} label="Required" />
      <FormControlLabel disabled control={<Checkbox />} label="Disabled" />
    </FormGroup>
  );
}

Ce ne sont là que quelques-unes des options disponibles proposées par MUI. Il n'y a pratiquement aucune limite au degré de personnalisation que nous pouvons apporter aux cases à cocher pour qu'elles correspondent parfaitement aux besoins de notre projet.

Conclusion

La React Checkbox est un outil puissant pour créer des formulaires interactifs. Nous avons commencé avec une case à cocher de base, ajouté un état pour contrôler la fonctionnalité, puis construit un composant réutilisable. Le composant Checkbox de Material UI a permis une personnalisation plus poussée, permettant des ajustements des couleurs, des tailles, des étiquettes et des icônes, ainsi qu'un état indéterminé pour les sélections complexes. Avec ces options, vous pouvez facilement personnaliser les cases à cocher pour répondre aux exigences de n'importe quel projet.

Pour plus de détails, consultez la documentation officielle de Material UI Checkbox.

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!