React中勾选Checkbox时如何将状态从false转为true并提交true到数据库

你的问题出在Checkbox的取值逻辑上：原生type="checkbox"的input组件，e.target.value拿到的是预设的字符串值（默认是'on'），判断是否勾选应该使用e.target.checked属性，这个属性返回的是布尔值。

你只需要做两处调整即可：

• 给Checkbox组件加上checked属性，和wpp状态做双向绑定，保证视图和状态同步
• 将onChange事件的取值从e.target.value替换为e.target.checked

修改后的组件代码如下：

<input
     type="checkbox"
     checked={wpp}
     name="wpp"
     onChange={(e) => setWpp(e.target.checked)}
     /> 

状态定义代码不需要改动，保留原有写法即可：
const [wpp, setWpp] = useState(false);

修改完成后，用户勾选Checkbox时wpp状态会自动更新为布尔值true，取消勾选时更新为false，提交表单时直接把wpp的值传给后端存入数据库即可。

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