ReactJS开发中checkbox无法取消勾选问题排查求助

问题原因 #

• 你在onChange回调中错误读取了event.target.value而非event.target.checked：checkbox 组件的value属性是固定的预设值，默认就是字符串ON，和勾选状态无关，你需要读取target.checked属性才能拿到布尔类型的勾选状态
• 你当前将字符串ON赋值给了状态checkBoxEmailPersonalized，在JS中非空字符串会被判定为布尔真值，所以checked属性永远为true，自然无法取消勾选

修复方案 #

将onChange的传参替换为event.target.checked即可，修改后代码如下：

const [checkBoxEmailPersonalized, setCheckBoxEmailPersonalized] = useState(false);

const onEmailPersonalized = (isChecked) => {
    console.log(isChecked)
    setCheckBoxEmailPersonalized(isChecked);
}

return (
   <div className="wrapper wrapper-with-nav pt-5">
     <div className="container">
       <div class="row">
         <div className="form-group col-md-2 checkbox-custom">
          <input type="checkbox"
           id="checkBoxEmailPersonalized" 
           name="checkBoxEmailPersonalized" 
           checked={checkBoxEmailPersonalized}
           className="form-control"
           onChange={event => onEmailPersonalized(event.target.checked)}/>
          <label htmlFor="checkBoxEmailPersonalized" className="form-label multiline">{t('EMAIL')}</label>
         </div>
       </div>
     </div>
   </div>
)

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