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

Question

我正在尝试 React-Hook-form

复选框的简单代码如下:

import React from 'react'
import { useForm } from 'react-hook-form'

export default function App() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm()
  const onSubmit = (data: any) => console.log(data)
  console.log(errors)

  return (
    <div className='mx-auto justify-center p-32 flex'>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className='p-2'>
          <label htmlFor=''>January</label>
          <input
            type='checkbox'
            placeholder='January'
            {...register('January', {})}
            className='mx-3'
            checked
          />
        </div>
        <div className='p-2'>
          <label htmlFor=''>February</label>
          <input
            type='checkbox'
            placeholder='February'
            {...register('February', {})}
            className='mx-3'
          />
        </div>
        <input type='submit' />
      </form>
    </div>
  )
}

我可以正确提交表单，但我希望 January 复选框以选中框的形式开始，但是当我按照代码所示放置“已选中”时，我无法以某种方式“取消选中”它。

我似乎遗漏了一些东西，我们将不胜感激任何帮助。

Answer 1

传递 checked 的问题是它从 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允许您在最初调用 Hook 时传递默认值。

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

// ...

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

---

或者，您也可以使用 “months”，而不是给每个复选框单独命名。如果有多个复选框使用相同的名称，结果将不是 true/false，而是一个包含值的数组。

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'
/>