javascript - 如何获取复选框的多个值?
问题描述
我计划有一个表单来提交用户使用复选框单击的所有表单。我正在尝试在控制台日志中查看提交的表单。到目前为止,我还无法查看 console.log 中检查的内容。每次我单击提交时,它只会为每个选项显示真或假。
这就是它在 console.log 中显示的内容
{checkedA: true, checkedB: false, checkedC: false, checkedD: true}
预期输出是 . 如果我点击“Fever”,它也会输出单词/字符串“Fever”。因为我稍后会将其存储在 Firestore 中。
const SideEffects = (props) => {
const classes = useStyles();
const [others, setOthers] = useState("");
const [state, setState] = useState({
checkedA: false,
checkedB: false,
checkedC: false,
checkedD: false,
});
const handleCheckbox = (event) => {
console.log(event.target.value);
setState({ ...state, [event.target.name]: event.target.checked });
};
const handleSubmit = (e) => {
e.preventDefault();
console.log(others, state);
};
return (
<Container>
<Typography>
Mark the symptoms or side effects you've experienced{" "}
</Typography>
<form onSubmit={handleSubmit}>
<Card className={classes.root}>
<FormGroup style={{ alignContent: "center", padding: "1rem" }}>
<FormControlLabel
control={
<Checkbox
checked={state.checkedA}
name="checkedA"
color="primary"
value="Fever"
onChange={handleCheckbox}
/>
}
label="Fever"
/>
<FormControlLabel
control={
<Checkbox
checked={state.checkedB}
name="checkedB"
color="primary"
value="Headache"
onChange={handleCheckbox}
/>
}
label="Headache"
/>
<FormControlLabel
control={
<Checkbox
checked={state.checkedC}
name="checkedC"
color="primary"
value="Nausea"
onChange={handleCheckbox}
/>
}
label="Nausea"
/>
<FormControlLabel
control={
<Checkbox
checked={state.checkedD}
name="checkedD"
color="primary"
value="Muscle Pain"
onChange={handleCheckbox}
/>
}
label="Muscle Pain"
/>
<TextField
type="text"
label="Ohers:"
value={others}
onChange={(e) => setOthers(e.target.value)}
/>
</FormGroup>
<ButtonForm type="submit">Submit</ButtonForm>
</Card>
<br />
</form>
</Container>
);
};
export default SideEffects;
解决方案
使用复选框值而不是名称useState
:
{
"Fever": false,
"Headache": false,
"Nausea": false,
"Muscle Pain": false,
}
推荐阅读
- python - 将 CSV 文件附加到 Google 表格
- firebase - 在 React Native 中使用 Firebase Cloud Functions 发送电子邮件
- graph - 通过 IMSUB 生成的值不会显示在数据透视表中,但使用手动键入的公式创建的值会显示
- c# - 本地 Nuget 镜像
- ios - 如何在swift中从键盘隐藏建议的电子邮件ID
- ios - iOS AR 3d 网格纹理(.obj)
- node.js - 从命令行(apk --update add),如何安装 node.js 的“当前最新功能”版本,而不是“为大多数用户推荐 LTS”?
- graphics - 我不知道在 formMouseReleased 事件中写什么
- reactjs - 在 React spfx 中获取日历覆盖详细信息
- javascript - 未在子文件夹路径上设置 Cookie