如何获取复选框的多个值？

Question

我计划有一个表单来提交用户使用复选框单击的所有表单。我正在尝试在控制台日志中查看提交的表单。到目前为止，我还无法查看 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;

Answer 1

在useState 中使用复选框值而不是名称：

{
  "Fever": false,
  "Headache": false,
  "Nausea": false,
  "Muscle Pain": false,
}