多个复选框 MUI 反应问题以更改状态

Question

I'm trying to change the state of multiple checkbox and then send a post request, visually the checkbox do changes, but not the data i'm getting from the form.. Here is my code:

export default function AccountInformations(props) {
  // const { enqueueSnackbar } = useSnackbar();
  const { translate } = useLocales();
  const {userSettings} = props
  const [time, setTime] = useState(userSettings)

  const defaultValues = {
    time1: time.time1,
    time2: time.time2,
    time3: time.time3,
    time4: time.time4,
    time5: time.time5,
    time6: time.time6,
  };

  const methods = useForm({
    defaultValues,
  });

  const {
    handleSubmit,
    formState: { isSubmitting },
  } = methods;
  
  const handleChange = (event) => {
    setTime({
      ...time,
      [event.target.name]: event.target.checked,
    });
  };

  const onSubmit = (data) => {
    console.log(data)
  };


  return (
    <Card sx={{ p: 3 }}>
      <FormProvider methods={methods} onSubmit={handleSubmit(onSubmit)}>
        <Stack spacing={3} alignItems="flex-end">
          <Stack spacing={2} sx={{ width: 1 }}>
            <Typography variant="overline" sx={{ color: 'text.secondary' }}>
              {translate('profil.info.time-title')}
            </Typography>
            <Typography variant="body2" sx={{ mb: 2 }}>
              {translate('profil.info.time-content')}
            </Typography>
            <Stack spacing={1}>
              <FormGroup>
              <FormControlLabel control={<Checkbox />} onChange={handleChange} name="time1" checked={time.time1} label={translate('profil.info.time1')} key={translate('profil.info.time1')}/>
              <FormControlLabel control={<Checkbox />} onChange={handleChange} name="time2" checked={time.time2} label={translate('profil.info.time2')} key={translate('profil.info.time2')}/>
              <FormControlLabel control={<Checkbox />} onChange={handleChange} name="time3" checked={time.time3} label={translate('profil.info.time3')} key={translate('profil.info.time3')}/>
              <FormControlLabel control={<Checkbox />} onChange={handleChange} name="time4" checked={time.time4} label={translate('profil.info.time4')} key={translate('profil.info.time4')}/>
              <FormControlLabel control={<Checkbox />} onChange={handleChange} name="time5" checked={time.time5} label={translate('profil.info.time5')} key={translate('profil.info.time5')}/>
              <FormControlLabel control={<Checkbox />} onChange={handleChange} name="time6" checked={time.time6} label={translate('profil.info.time6')} key={translate('profil.info.time6')}/>
              </FormGroup>
            </Stack>
          </Stack>
          <LoadingButton type="submit" variant="contained" loading={isSubmitting}>
            Save Changes
          </LoadingButton>
        </Stack>
      </FormProvider>
    </Card>
  );
}

the userSettings are coming this way:

email_language: "French"
notification_daily_reminder: false
notification_google_calendar: true
notification_newsletter: true
share_email_with_contact: true
time1: false
time2: false
time3: false
time4: false
time5: false
time6: false

I just need to be able to see when the change when I console.log the data since those are the one I will send in my POST request (so far I dont all the checkbox are "false" even if checked).

Answer 1

不应该在<Checkbox/>中声明onChange - 不是标签？

<FormControlLabel control={<Checkbox onChange={handleChange} />} name="time1" checked={time.time1} label={translate('profil.info.time1')} key={translate('profil.info.time1')}/>