Javascript React Hook Form 将复选框设置为选中状态

通过checked的问题是，管理复选框会失go useForm的控制权.

假设函数register()返回{ checked: true/false, onChange: changeHandler }.因此，如果我们从哪里看属性，就会产生以下结果.

<input
  type='checkbox'
  placeholder='January'
  {...register('January', {})}
  className='mx-3'
  checked
/>

<input
  type='checkbox'
  placeholder='January'
  {...{
    checked: true/false,
    onChange: changeHandler,
  }}
  className='mx-3'
  checked
/>

<input
  type='checkbox'
  placeholder='January'
  checked={true/false}
  onChange={changeHandler}
  className='mx-3'
  checked
/>

由于checked存在两次，后者将覆盖前者.在这种情况下，checked是最后一个，因此它会覆盖useForm管理的值.

在register()调用之前传递它也不会有帮助，因为默认值将被useForm管理的值覆盖，因此永远不会使用.

现在我已经澄清了为什么会发生这个问题，让我们继续讨论解决方案.

useForm允许您在最初调用钩子时传递默认值.

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm({ defaultValues: { January: true } });

// ...

<input
  type='checkbox'
  {...register("January")}
  className='mx-3'
/>

或者，您也可以使用"months"，而不是 for each 复选框指定自己的名称.如果有多个复选框使用相同的名称，结果将不是true/false，而是一个包含值的array.

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm({
  defaultValues: { months: ["January"] }
  //               only January ^ is checked by default
});

//...

<input
  type='checkbox'
  value='January'
  {...register("months")}
  className='mx-3'
/>
<input
  type='checkbox'
  value='February'
  {...register("months")}
  className='mx-3'
/>