Utilisez React pour obtenir la valeur sélectionnée d'une case à cocher
P粉590929392
P粉590929392 2023-09-02 22:36:49
0
2
611
<p>J'essaie de récupérer la valeur cochée d'une case à cocher et de l'enregistrer dans un tableau. J'ai essayé : </p> <pre class="brush:php;toolbar:false;">arr.push(setNewItem(checked)) arr.push(e.target.value.checked) arr.push(items.checked)</pre> <p>Mais ceux-ci renvoient des valeurs de type incorrect ou non définies. </p> <pre class="brush:php;toolbar:false;">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); };</pré> <pre class="brush:php;toolbar:false;">retour ( <div className="Application"> <FormulaireStyle> <StyleEntrée type="texte" placeholder="Ajouter" valeur={nouvelArticle} onChange={(e) => setNewItem(e.target.value)} onKeyPress={handleOnKeyPress} /> <ButtonAddStyle onClick={() => addItem()}>Ajouter</ButtonAddStyle> <StyleUl> {items.map((élément) => { retour ( <Touche StyleLi={item.id}> <StyleCheckBox type="case à cocher" valeur={isChecked} onChange={handleChange} /> {élément.valeur} {""} <ButtonDelStyle onClick={() => deleteItem(item.id)}> X </ButtonDelStyle> </StyleLi> ); })} </StyleUl> </StyleForm> </div> );</pré>
P粉590929392
P粉590929392

répondre à tous(2)
P粉575055974

Cela peut résoudre votre problème.

const [checkedItems, setCheckedItems] = useState([]);
const handleChange = (e) => {
  setCheckedItems( prev => [...prev, e.target.checked]);
  setIsChecked((current) => !current);
};
P粉846294303
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.

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal