React实现复选框最多选3个：支持取消已选并切换选项

要实现最多选3个选项的限制，同时保留取消已选选项、切换其他选项的功能，只需要修改你的setSexualOrientation函数逻辑即可：

let [selected, setSelected] = useState([]);
const setSexualOrientation = (val) => {
  // 如果当前选项已选中，直接移除（允许随时取消选择）
  if (selected.includes(val)) {
    setSelected(selected.filter(item => item !== val));
    return;
  }
  // 未选中且已选数量不足3个时，添加新选项
  if (selected.length < 3) {
    setSelected([...selected, val]);
  }
  // 可选：如果需要提示用户已选满，可在此添加提示逻辑（比如弹出提示框）
};

逻辑说明： #

• 优先处理取消操作：只要选项已在选中列表里，直接过滤移除，不限制数量，保证用户能随时取消选择。
• 添加新选项时做数量校验：只有当已选选项数量小于3时，才允许添加新选项，实现最多选3个的限制。

这样修改后，既满足了选项数量限制的需求，又完全保留了取消、切换选项的功能。

内容的提问来源于stack exchange，提问作者Flo