<p>我正在尝试检索复选框的选中值并将其保存到数组中。
我尝试了：</p>
<pre class="brush:php;toolbar:false;">arr.push(setNewItem(checked))
arr.push(e.target.value.checked)
arr.push(items.checked)</pre>
<p>但这些返回类型错误或未定义的值。</p>
<pre class="brush:php;toolbar:false;">const [checkedItems, setCheckedItems] = useState([]);
const handleChange = (e) => {
if (e.target.checked) {
var arr = [...checkedItems];
//arr.push(setNewItem(e.target.value.checked));
setCheckedItems(arr);
console.log(arr);
} else {
checkedItems = "";
}
setIsChecked((current) => !current);
};</pre>
<pre class="brush:php;toolbar:false;">return (
<div className="App">
<StyleForm>
<StyleInput
type="text"
placeholder="添加"
value={newItem}
onChange={(e) => setNewItem(e.target.value)}
onKeyPress={handleOnKeyPress}
/>
<ButtonAddStyle onClick={() => addItem()}>添加</ButtonAddStyle>
<StyleUl>
{items.map((item) => {
return (
<StyleLi key={item.id}>
<StyleCheckBox
type="checkbox"
value={isChecked}
onChange={handleChange}
/>
{item.value}
{""}
<ButtonDelStyle onClick={() => deleteItem(item.id)}>
X
</ButtonDelStyle>
</StyleLi>
);
})}
</StyleUl>
</StyleForm>
</div>
);</pre>
2
854
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
这可能解决您的问题。
const [checkedItems, setCheckedItems] = useState([]); const handleChange = (e) => { setCheckedItems( prev => [...prev, e.target.checked]); setIsChecked((current) => !current); };是正确的方法，可以摆脱：
else { checkedItems = ""; }你不能用这种方式更新状态，当你尝试取消选中一个输入时，会出现错误：
现在让我们看看你想做什么，每次选中一个输入时，你都存储了
e.target.checked，所以checkedItems会变成这样：你为什么需要这个？更好的做法是存储选中项的id：
const handleChange = (isChecked, id) => { var arr = [...checkedItems]; if (isChecked) { arr.push(id); setCheckedItems(arr); } else { setCheckedItems(checkedItems.filter((storedId) => storedId !== id)); // 如果对应的输入未选中，则从checkedItems中删除id } };然后在jsx中：
<StyleCheckBox type="checkbox" value={item.id} onChange={(e) => { handleChange(e.target.checked, item.id); }} />;现在看看这个：
<StyleCheckBox value={isChecked} // 这一行 >你正在通过
items进行映射，创建多个复选框，但它们都共享相同的值。而复选框的值属性并不是你想象的那样，请在这里了解更多。所以你可以使用value={item.id}为每个输入设置一个唯一的值，并且可以摆脱isChecked的useState hook，你真的不需要它。