限制在react中选择的复选框的数量

Question

目前我有一个注册表单5个选项，但我试图找到一种方法来限制，所以用户只能选择2个选项，如果用户选择第三个选项，第一个将被选中，我已经找到了一种方法在纯js中做到这一点，但我还没有找到一个反应的方式来做它。这就是我到目前为止所拥有的，用纯js而不是react来处理会更好吗?

{iconsPool.map((src, index) => (
<Box className="test">
<input type="checkbox" className="iconsCheckbox" id={iconsPool.id} />
<label for={iconsPool.id}>
<img className="signupIcons" src={iconsPool[index].src} key={index} />
</label>
{console.log(iconsPool)}
</Box>
))}

Answer 1

这可以通过一个包含2个元素的数组来实现。状态数组中的两个项将表示所选项的索引。

如果一个复选框被选中，该复选框和前一个被选中的复选框将被选中。(因此取消选中之前点击的那个)

这可以通过将新单击的复选框的索引推入数组的头部，并删除数组的最后一项来实现。

当再次单击选中的复选框时(因此应该未选中)，从状态数组中搜索该复选框的索引，并通过将该值替换为undefined

来删除该值。下面是代码，作为一个示例

...
const [checkedItems, setCheckedItems] = useState([undefined,undefined])
// When an Item is clicked
const onClickItem = (itemIndex:number, isSelected: boolean) =>{
if(isSelected){
setCheckedItems(c=>([itemIndex,c[0]]))
} else {
if(itemIndex === checkedItems[0]){
setCheckedItems(c=>([undefined,c[1]]))
} else if(itemIndex === checkedItems[1]){
setCheckedItems(c=>([c[0],undefined]))
}
}

}