React结合Reactstrap开发时表单提交后checkbox无法重置为未勾选状态

问题原因 #

你遇到的是受控Checkbox的属性绑定错误：
Checkbox类表单元素的勾选状态由checked属性控制，value属性仅用于存储选中后提交的字段值，不会控制勾选状态。你当前只把reminder状态绑定到了value上，没有绑定到checked属性，因此状态更新后视图不会同步变化。

修复方案 #

把checkbox对应的input代码中的value={reminder}替换为checked={reminder}即可，修正后的代码如下：

<div className="mb-3 form-check">
  <input
    type="checkbox"
    id="checkbox1"
    className="form-check-input"
    checked={reminder} // 替换原来的value属性
    onChange={(e) => setReminder(e.currentTarget.checked)}
  />
  <label className="form-check-label" htmlFor="checkbox1">
    Set reminder
  </label>
</div>

修改后reminder状态和Checkbox的勾选状态就会完全同步，提交后调用setReminder(false)就会自动取消勾选了。

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