React切换按钮功能正常但滑块不移动问题求助

问题分析 #

功能正常但滑块不移动的核心原因是Checkbox未使用受控组件模式：当前代码用defaultChecked设置初始状态，但后续isMonthly状态变化时，Checkbox的实际选中状态没有同步更新，导致CSS的:checked伪类无法正确触发，滑块的位移效果不生效。

解决方案 #

将Checkbox从非受控改为受控组件，用checked属性绑定状态，而非defaultChecked：

修改Plans组件中的Checkbox代码 #

原代码片段：

<input
  type="checkbox"
  defaultChecked={!isMonthly}
  value={isMonthly ? "Montly" : "Yearly"}
  onChange={e => changeBilling(e)}
/>

修改后代码：

<input
  type="checkbox"
  checked={!isMonthly}
  value={isMonthly ? "Montly" : "Yearly"}
  onChange={e => changeBilling(e)}
/>

原因说明 #

• defaultChecked仅负责设置初始值，属于非受控组件范畴，状态变化后不会自动同步Checkbox的选中状态；
• checked绑定!isMonthly后，每次isMonthly状态反转，Checkbox的选中状态会实时同步更新，CSS的:checked伪类能正确触发，滑块的transform: translateX(21px)样式就会生效。

验证效果 #

修改后点击Toggle按钮时：

1. isMonthly状态正常反转；
2. Checkbox的选中状态同步更新；
3. CSS伪类触发，滑块平滑移动；
4. 月付/年付价格切换功能保持正常。

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