自定义Checkbox组件无法切换选中状态问题求助

核心问题：Label与Input未建立关联 #

你的Checkbox组件中，用于展示视觉效果的<label>和实际负责状态控制的<input>没有绑定关联。由于input被display: none隐藏，用户实际点击的是label元素，但未关联的label无法触发input的onChange事件，导致父组件的approved状态无法更新，Checkbox始终保持初始选中状态。

具体修复步骤 #

1. 给label添加htmlFor属性，关联到input的id，确保点击label时能触发input的change事件：

<label
  htmlFor={inputId} // 新增该行，绑定到input的id
  className={classNames("inputCheckboxLabel", {
    "inputCheckboxLabel--checked": checked,
    "inputCheckboxLabel--disabled": disabled,
  })}
/>

2. 优化onChange事件逻辑（可选但更严谨）：
   避免直接使用!checked推导状态，改为从事件对象中获取input的实际选中状态，防止因props更新延迟导致的逻辑错误：

<input
  id={inputId}
  type="checkbox"
  className="inputCheckboxLabel--input"
  checked={checked}
  disabled={disabled}
  onChange={(e) => onChange(e.target.checked)} // 修改此处
/>

额外验证项 #

• 确认inputId变量的取值正确，保证与label的htmlFor、input的id完全一致
• 检查父组件中loading状态是否在操作时被误设为true，导致Checkbox被禁用无法交互

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