代码之家 › 专栏 › 技术社区 › Enfield Li

反应复选框无法重置为默认的“未选中”状态

reactstrap reactjs javascript

Enfield Li · 技术社区 · 3 年前

我正在复制YouTube Traversy Media的 React JS crash course 2021 在React-dev工具中,值被重置为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>

1 回复 | 直到 3 年前

Youssouf Oumar 3 年前

尝试这样做:

  <input
      type="checkbox"
      id="checkbox1"
      className="form-check-input"
      checked = {reminder}
      //or if you wanna be more relevant
      //checked = {reminder ? "true" : "false"}
      onChange={(e) => setReminder(e.currentTarget.checked)}
  />