CheckBox 值始终返回 true

【问题标题】：CheckBox value always returns trueCheckBox 值始终返回 true
【发布时间】：2021-05-27 03:22:40
【问题描述】：

我使用变量设置的复选框总是返回变量的值，并且复选框总是被选中。如果值为 true，则返回 true，反之亦然

answerOption={isCorrect:true}
<input type="checkbox" checked={(!answerOption.isCorrect) ? false : true}  onChange={this.updateAnswerChecked.bind(this)}  style="cursor:pointer;" />
updateAnswerChecked(e){
   console.log(e.target.checked);
   answerOption.isCorrect = e.target.checked
}

【问题讨论】：

你不能像那样触发重新渲染，你需要使用 setState

标签： reactjs checkbox

【解决方案1】：

更简单的工作示例：

export default function App() {
  const [answerOption, setAnswerOption] = useState(true); 

  const updateAnswerChecked = (e) => {
    console.log(e.target.checked);
    setAnswerOption(e.target.checked);
  };

  return (
    <input
      type="checkbox"
      onChange={updateAnswerChecked}
      checked={answerOption}
    />
  );
}

使用您的代码：

export default function App() {
  const [answerOption, setAnswerOption] = useState({isCorrect: true);

  const updateAnswerChecked = (e) => {
    console.log(e.target.checked);
    setAnswerOption({isCorrect: e.target.checked});
  };

  return (
    <input
      type="checkbox"
      onChange={updateAnswerChecked}
      checked={answerOption.isCorrect}
      style={{cursor: pointer}}
    />
  );
}

【讨论】：