Décochez plusieurs cases dans le groupe de cases à cocher à l'aide des hooks React

Question

J'ai exécuté plusieurs cases à cocher dans plusieurs groupes de cases à cocher. Je n'arrive pas à comprendre comment décocher (changeant ainsi l'état) une case à cocher spécifique. Pour une raison quelconque, je ne peux pas accéder à e.target.checked.

 handleOnChange(e)}
  />
et mes fonctions
const handleOnChange = (e) =>
   const check = e.target.checked;
   setChecked(!vérifier);
};
J'ai créé un exemple fonctionnel du composant dans ce bac à sable. 

Answer 1

Voici comment j'ai procédé : https://codesandbox.io/s/elastic-pateu-flwqvp?file=/components/Selectors.js

J'ai résumé la logique de sélection dans une clé useSelection()自定义钩子，这意味着当前选择可以在store[key].selected中找到，其中key可以是selectorsany.

Chaque useSelection()调用中的items、selected、setSelected和sectionLabel都存储在store[key]中，并传递给一个<CustomCheckboxGroup /> composant.

La partie pertinente est supprimée de la valeur handleCheck函数，它根据先前选择的值设置新的选择：如果当前item包含在先前的selected au sein du composant. Sinon, ajoutez-le.

---

Explication plus détaillée (pourquoi)

En regardant attentivement votre code, il semble que vous ne compreniez pas comment fonctionne le composant case à cocher dans React.

input的checked属性由一个booleanContrôle du statut. Exemple générique :

const Checkbox = ({ label }) => {
  const [checked, setChecked] = useState(false)
  return (
    <label>
      <input
        type="checkbox"
        checked={checked}
        onChange={() => setChecked(!checked)}
      />
      <span>{label}</span>
    </label>
  )
}

À chaque rendu, l'événement <input />的checked值根据checked状态的当前值设置。当输入的checked发生变化（用户交互时），状态不会自动更新。但是onChange est déclenché et nous l'utilisons pour mettre à jour l'état à la valeur négative de la valeur précédente de l'état.

---

Lorsque nous traitons du composant <CheckboxList />, nous <CheckboxList />组件时，我们不能使用单个布尔值来控制所有复选框，我们需要为正在渲染的每个复选框设置一个布尔值。因此，我们创建一个selected数组，并将每个<input />的checked值设置为selected.includes(item)的值（返回一个boolean ne pouvons pas

utiliser une seule valeur booléenne pour contrôler

toutes les onChange事件中更新selected数组的值。我们检查item是否包含在先前版本的selected cases à cocher, nous devons

em>Chacune la case à cocherdéfinit une valeur booléenne. Par conséquent, nous créons un tableau selected et définissons la valeur checked de chaque <input /> sur selected.includes La valeur de (item) (renvoie un booléen).

Pour que cela fonctionne, nous devons être dans chacun 🎜. S’il est présent, filtrez-le. S'il n'existe pas, ajoutez-le : 🎜

const CheckboxList = ({ items }) => {
  const [selected, setSelected] = useState([])
  const onChecked = (item) =>
    setSelected((prev) =>
      prev.includes(item)
        ? prev.filter((val) => val !== item)
        : [...prev, item]
    )

  return items.map((item) => (
    <label key={item}>
      <input
        type="checkbox"
        checked={selected.includes(item)}
        onChange={() => onChecked(item)}
      />
      <span>{item}</span>
    </label>
  ))
}

🎜J'espère que cela résoudra certains problèmes. 🎜

Answer 2

Vous devez créer une fonction handleOnChange spécifique pour chaque groupe. J'ai créé une fonction similaire pour le groupe de cases à cocher Genre et vous pouvez la créer pour d'autres groupes de la même manière.

C'est la fonction de traitement.

const handleOnChangeGenre = (e) => {
    let newValArr = [];
    if (e.target.checked) {
      newValArr = [...state.pillarGenre.split(","), e.target.value];
    } else {
      newValArr = state.pillarGenre
        .split(",")
        .filter((theGenre) => theGenre.trim() !== e.target.value);
    }
    setState({ ...state, pillarGenre: newValArr.join(",") });
  };

Transmettez cette fonction comme attribut handleOnChange à CustomCheckboxGroup comme indiqué ci-dessous.

<CustomCheckboxGroup
          checkboxdata={genres}
          checkboxvalues={state.pillarGenre}
          value={state.pillarGenre}
          sectionlabel="Genre"
          onToggleChange={handleGenreSwitch}
          togglechecked={genreswitch}
          handleOnChange={handleOnChangeGenre}
        />

Pour tester, commentez votre fonction handleOnChange.

Afficher la solution de travail complète dans le bac à sable - Code complet