复选框输入返回空字符串而不是 true/false，使用 React hook dom 和 material-ui FormControlLabel答案

【问题标题】：Checkbox input returning empty string instead of true/false, using React hook dom and material-ui FormControlLabel复选框输入返回空字符串而不是 true/false，使用 React hook dom 和 material-ui FormControlLabel
【发布时间】：2021-09-10 06:50:11
【问题描述】：

我正在尝试打印从表单返回的值。这是 Checkbox 部分的 sn-p。

<FormControlLabel
              control={<Checkbox  {...register('remember')} name="remember" color="primary" defaultValue={false} />}
              label="Remember me"
            />

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

但是，提交后我得到的结果是-

{"用户名":"sdfs","密码":"dfsd","记住":""}

而不是- {"username":"sdfs","password":"dfsd","remember":true}

我在这里做错了什么，正确的做法是什么？

【问题讨论】：

标签： javascript html reactjs material-ui react-hook-form

【解决方案1】：

我认为这里的错误是因为您实际上并未将 checked 属性传递给 <Checkbox> 组件

使用 useState 创建一个rememberMe 状态
创建handleChange 函数
将检查状态和 handleChange 都传递给 Checkbox 组件

现在您可以在提交时使用 rememberMe 状态

const [rememberMe,setRememberMe] = useState(false);

const handleChange = (e)=>{
 setRememberMe(e.target.checked)
}

 <FormControlLabel
       control={<Checkbox checked={rememberMe} onChange={handleChange} 
       name="remember" />}
       label="Remember me"
           />

【讨论】：