Utilisez React pour obtenir la valeur sélectionnée d'une case à cocher
P粉590929392
2023-09-02 22:36:49
<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é>
Cela peut résoudre votre problème.
est la bonne façon de se débarrasser de :
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 :Pourquoi as-tu besoin de ça ? Une meilleure approche consiste à stocker l'identifiant de l'élément sélectionné :
Puis en jsx :
Maintenant, regardez ceci :
Vous passez le hook useState de
items
进行映射,创建多个复选框,但它们都共享相同的值。而复选框的值属性并不是你想象的那样,请在这里了解更多。所以你可以使用value={item.id}
为每个输入设置一个唯一的值,并且可以摆脱isChecked
, dont vous n'avez vraiment pas besoin.