React 复选框无法重置为默认未选中状态答案

【问题标题】：React, cannot reset checkbox to default unchecked stateReact 复选框无法重置为默认未选中状态
【发布时间】：2021-12-28 07:47:07
【问题描述】：

我正在尝试使用 Reactstrap 重现 Youtuber Traversy Media 的 React JS crash course 2021 Task Tracker 项目，并使用相同的方法（组件级挂钩）创建一个带有复选框的表单，我设置了一个方法，确保提交表单后，文本区域将设置为空，复选框设置为 false，因此未选中。当我点击提交时，复选框已设置为 false，但仍处于选中状态。从 React 开发工具中，该值被重置为 false 并且复选框应该被取消选中，我不知道出了什么问题，我做了和视频一样的事情。我在这里粘贴代码时遇到问题，因此省略了不相关的部分，例如输入文本代码。提前致谢！

const [reminder, setReminder] = useState(false);
const onSubmit = (e) => {
e.preventDefault()

if (!text) {
  alert('Please add a task')
  return
}

onAdd({ text, day, reminder })

setText('')
setDay('')
setReminder(false)}

      {/* checkbox here */}
  <div className="mb-3 form-check">
    <input
      type="checkbox"
      id="checkbox1"
      className="form-check-input"
      value={reminder}
      onChange={(e) => setReminder(e.currentTarget.checked)}
    />
    <label className="form-check-label" htmlFor="checkbox1">
      Set reminder
    </label>
  </div>

  {/* submit button */}
  <div className="d-grid">
    <button type="submit" className="btn btn-primary">
      Submit
    </button>
  </div>

【问题讨论】：

您的代码没有反映上述结果，因为输入没有属性checked。问题一定出在其他地方。
@Thanh Trung 但是视频也没有使用属性检查，如果不使用 reactstrap 进行样式设置，值也有效，我不确定这是否是引导程序

标签： javascript reactjs reactstrap

【解决方案1】：

这样做会奏效：

  <input
      type="checkbox"
      id="checkbox1"
      className="form-check-input"
      checked={reminder}
      onChange={(e) => setReminder(e.currentTarget.checked)}
  />

【讨论】：

checked = {reminder} 就足够了。此处无需将布尔值转换为字符串。
checked={reminder} 周围没有空格
@ThanhTrung 文体上可能，句法上不相关。
@Enfieldli 很高兴它成功了！请将回复标记为您正在寻找的答案，以便其他人知道。当然是 Yoshi，我只是想更具体一点。
@yousoumar 我明白，但如果你用打字稿来做这件事，那实际上是一个错误。因为选中的属性只允许boolean | undefined。所以我觉得还是坚持布尔类型比较好。