在reactjs中获取多个复选框值

Question

我试图在带有复选框的表中列出我的产品详细信息，然后我需要获得一些要检查的的产品id

这是我的代码

const [products, setProducts] = React.useState([]);
const preload = async () => {
const data = await getAllActiveProducts();
const loadedproducts = []; 
for(const key in data){
loadedproducts.push({
id: key,
pid: data[key]._id,
name: data[key].name,
price: data[key].price,
inventory: data[key].inventory,
image: data[key].image
})
}
console.log(loadedproducts);
setProducts(loadedproducts);
}
React.useEffect(() => {
preload(); 
}, []);
const productsList = products.map(product => 
<ActiveProductItem 
key = {product.id} 
id = {product.pid}
name = {product.name}
description = {product.description}
price = {product.price}
SKU = {product.SKU}
inventory = {product.inventory}
image = {product.image}
productStatus = {product.productStatus}
/>);

ActiveProductItem代码在这里

const ActiveProductItem = (props) => {

const { name, price, SKU, inventory, image, id, key} = props;
const [selectedProducts, setSelectedProducts] = React.useState([]);
return (

<tbody>
<tr>
<td><input type="checkbox" onClick={(event) =>{
const checkedproducts = selectedProducts; 
if (event.target.checked) {

const value =  event.target.value;
console.log(value);
checkedproducts.push({id});
setSelectedProducts([
...selectedProducts,
{
id: id
},
]);
}else {
// remove from list
setSelectedProducts(
selectedProducts.filter((product) => product.id !== id),
);
}
console.log(selectedProducts);
console.log(checkedproducts);
}} name="prod-item" value={id}/></td>
<td><span class="admin-list-img"><img src={`${API}/${image}`} alt="" /></span></td>
<td>
<div class="">
<a href="edit-product.html"><u>{name}</u></a>
</div>
<span>SKU: <span>{SKU}</span></span>
</td>
<td>${price}</td>
<td>{inventory}</td>
</tr>

</tbody>
);
};

更新

const productsList = products.map(product => 
<ActiveProductItem 
key = {product.id} 
id = {product.pid}
name = {product.name}
description = {product.description}
price = {product.price}
SKU = {product.SKU}
inventory = {product.inventory}
image = {product.image}
productStatus = {product.productStatus}
handler = {checkHandler}
/>);

我也尝试了数组推送方法和设置状态，但结果总是显示检查最后一个的单个id

请告诉我我做错了什么，我对reactjs非常陌生谢谢

Answer 1

真正的问题是将收集的值存储在Item组件本身中。如果要存储选中项的集合，则需要在父组件(呈现项集合的组件(中执行此操作。在组件中，您应该保持状态(让我们称之为checkedItems-(，并给每个项一个回调，用check/uuncheck向父项发出信号。然后，您可以使用该信号将传入的id添加到checkedItems。