Case à cocher avec état et sélection multiple

Introduction

Dans ce laboratoire, nous allons apprendre à créer une case à cocher avec état et sélection multiple à l'aide de React. Ce laboratoire vous guidera tout au long du processus de rendu d'une liste de cases à cocher, de mise à jour de son état et de passage de la valeur ou des valeurs sélectionnées au composant parent à l'aide d'une fonction de rappel. À la fin de ce laboratoire, vous serez capable de créer un composant de case à cocher réutilisable qui peut être utilisé dans n'importe quel projet React.

Case à cocher avec état et sélection multiple

index.html et script.js ont déjà été fournis dans la machine virtuelle. En général, vous n'avez qu'à ajouter du code à script.js et style.css.

Ce code affiche une liste de cases à cocher et envoie la valeur ou les valeurs sélectionnées au composant parent à l'aide d'une fonction de rappel. Voici les étapes pour la créer :

1. Utilisez le hook useState() pour initialiser la variable d'état data avec la propriété options.
2. Créez une fonction toggle qui met à jour la variable d'état data avec l'option ou les options sélectionnées et appelle la fonction de rappel onChange avec elles.
3. Map la variable d'état data pour générer des cases à cocher individuelles et leurs étiquettes. Associez la fonction toggle au gestionnaire onClick de chaque case à cocher.

const MultiselectCheckbox = ({ options, onChange }) => {
  const [data, setData] = React.useState(options);

  const toggle = (index) => {
    const newData = [...data];
    newData[index] = {
      ...newData[index],
      checked: !newData[index].checked
    };
    setData(newData);
    onChange(newData.filter((item) => item.checked));
  };

  return (
    <>
      {data.map((item, index) => (
        <label key={item.label}>
          <input
            type="checkbox"
            checked={item.checked || false}
            onChange={() => toggle(index)}
          />
          {item.label}
        </label>
      ))}
    </>
  );
};

Voici un exemple d'utilisation :

const options = [{ label: "Item One" }, { label: "Item Two" }];

ReactDOM.createRoot(document.getElementById("root")).render(
  <MultiselectCheckbox
    options={options}
    onChange={(selected) => {
      console.log(selected);
    }}
  />
);

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire Case à cocher avec état et sélection multiple. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.