时间戳

首页 > 解决方案 > CheckBox 值始终返回 true

reactjs - CheckBox 值始终返回 true

问题描述

我使用变量设置的复选框始终返回变量的值，并且始终选中该复选框。如果值为 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
}

标签： reactjscheckbox

解决方案

更简单且有效的示例：

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}}
    />
  );
}

推荐阅读