Блог

Я планирую создать форму для отправки всех тех, которые были нажаты пользователем с помощью флажка. Я пытаюсь просмотреть отправленную форму в журнале консоли. До сих пор мне не удавалось просмотреть то, что было проверено в console.log. Каждый раз, когда я нажимаю «Отправить», для каждого из вариантов отображается только значение «Правда» или «ложь».

Это то, что он показывает в консоли.log

  {checkedA: true, checkedB: false, checkedC: false, checkedD: true}
 

Ожидаемый результат таков . Если я нажму «Лихорадка», он также выведет слово/строку «Лихорадка». Так как позже я буду хранить это в 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,
}