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

Posted 2023-02-22

【中文标题】复选框输入返回空字符串而不是 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

【发布时间】：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","re​​member":true

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

【参考方案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"
           />