React Hook Forms + Material UI 复选框 + FormControlLabel 没有收到默认值

Question

我正在使用 React Hook Forms，我想发送接收 Checkbox 值的处理，该值默认设置为 true 我注册了组件，一切都很好，但是如果我什么都不碰（虽然复选框的值设置为 true），我会得到未定义的，但是一旦我手动更改复选框的值，它就会正常传送。告诉我赋值如何？

const { register, handleSubmit } = useForm();

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

const [checkemail, setcheckemail] = useState(true);

<form onSubmit={handleSubmit(MyOnSubmit)}>
  <FormControlLabel
    value={checkemail}
    control={<Checkbox defaultChecked color="primary" />}
    label="Ok"
    {...register('check')}
    onClick={(e) => {
      setcheckemail(e.target.checked);
    }}
  />

  <Button type="submit" color="primary"> 
    Sign Up
  </Button>
</form>

复选框是默认设置的，如果我不手动更改它并单击提交表单按钮，我会得到 check = undefined

如果我手动设置复选框或取消选中，则值将正常传输

为什么？如何获取要传递的默认复选框值

Answer 1

请通过替换 useForm 和 FormControlLabel 来尝试此代码。它应该工作

const {register, handleSubmit, control  } = useForm();

  <FormControlLabel
        label={"Ok"}
        control={
          <Controller
            name="check"
            control={control}
            defaultValue={true}
            value={checkemail}
            render={({ field }) => <Checkbox {...field} defaultChecked />}
            onClick={(e) => {
              setcheckemail(e.target.checked);
            }}
          />
        }
      />

请参考https://react-hook-form.com/get-started#IntegratingControlledInputs

React Hook Forms + Material UI 复选框 + FormControlLabel 没有收到默认值

React Hook Forms + Material UI Checkboxes + FormControlLabel don't recieve default value

reactjs

material-ui

react-hook-form