Utilisez React pour obtenir la valeur sélectionnée d'une case à cocher

Question

J'essaie de récupérer la valeur cochée d'une case à cocher et de l'enregistrer dans un tableau. J'ai essayé :

arr.push(setNewItem(checked))
arr.push(e.target.value.checked)
arr.push(items.checked)

Mais ceux-ci renvoient des valeurs de type incorrect ou non définies.

const [checkedItems, setCheckedItems] = useState([]);
const handleChange = (e) =>
    si (e.target.checked) {
      var arr = [...checkedItems];
      //arr.push(setNewItem(e.target.value.checked));
      setCheckedItems(arr);
      console.log(arr);
    } autre {
      Éléments vérifiés = "";
    }
    setIsChecked((current) => !current);
  };
retour (
    

      
         setNewItem(e.target.value)}
          onKeyPress={handleOnKeyPress}
        />
         addItem()}>Ajouter

        
          {items.map((élément) => {
            retour (
              
                
                {élément.valeur}
                {""}
                 deleteItem(item.id)}>
                  X
                
              
            );
          })}
        
      
    
  );

Answer 1

Cela peut résoudre votre problème.

const [checkedItems, setCheckedItems] = useState([]);
const handleChange = (e) => {
  setCheckedItems( prev => [...prev, e.target.checked]);
  setIsChecked((current) => !current);
};

Answer 2

arr.push(e.target.checked);

est la bonne façon de se débarrasser de :

else {
checkedItems = "";
}

Vous ne pouvez pas mettre à jour le statut de cette façon, lorsque vous essayez de décocher une entrée, une erreur apparaîtra :

Voyons maintenant ce que vous voulez faire, chaque fois que vous sélectionnez une entrée que vous enregistrez e.target.checked，所以checkedItems elle ressemblera à ceci :

[true, true, true, true, true, true, true, true]

Pourquoi as-tu besoin de ça ? Une meilleure approche consiste à stocker l'identifiant de l'élément sélectionné :

const handleChange = (isChecked, id) => {
  var arr = [...checkedItems];
  if (isChecked) {
    arr.push(id);
    setCheckedItems(arr);
  } else {
    setCheckedItems(checkedItems.filter((storedId) => storedId !== id)); // 如果对应的输入未选中，则从checkedItems中删除id
  }
};

Puis en jsx :

<StyleCheckBox
  type="checkbox"
  value={item.id}
  onChange={(e) => {
    handleChange(e.target.checked, item.id);
  }}
/>;

Maintenant, regardez ceci :

<StyleCheckBox
  value={isChecked} // 这一行
>

Vous passez le hook useState de items进行映射，创建多个复选框，但它们都共享相同的值。而复选框的值属性并不是你想象的那样，请在这里了解更多。所以你可以使用value={item.id}为每个输入设置一个唯一的值，并且可以摆脱isChecked, dont vous n'avez vraiment pas besoin.