如何通过react-hook-form正确获取Checkbox的选中状态与值？

问题根源 #

你遇到的核心问题是手动设置的checked/onChange与react-hook-form的register生成的同名属性冲突，props的传递顺序决定了谁覆盖谁：

• 第一种顺序：{...register}在最后，会覆盖你手动定义的checked和onChange，此时组件受控于react-hook-form的内部状态，和你的isChecked[1]不同步，导致勾选标记不显示。
• 第二种顺序：手动定义的checked/onChange覆盖了register的属性，react-hook-form无法捕获勾选状态的变化，因此watch始终获取到初始的false。

解决方案 #

方法一：使用Controller组件（推荐，适配自定义受控组件）

Controller是react-hook-form专门用于整合自定义受控组件的API，它能帮你统一管理表单状态和组件的勾选状态，同时允许你插入自定义逻辑：

import { Controller, useForm } from "react-hook-form";

// 你的自定义CheckboxInput组件（确保受控于传入的checked和onChange）
function CheckboxInput({ checked, onChange, id, value }) {
  return (
    <input
      type="checkbox"
      id={id}
      value={value}
      checked={checked}
      onChange={(e) => onChange(e.target.checked)}
    />
  );
}

// 表单组件内使用
const { control, watch } = useForm({
  defaultValues: {
    badCheckbox: false // 为checkbox设置初始状态
  }
});

<Controller
  name="badCheckbox" // 表单字段名，用于watch获取值
  control={control}
  render={({ field: { onChange, value } }) => (
    <CheckboxInput
      id={id}
      value="BAD"
      checked={value}
      onChange={(isChecked) => {
        // 先执行你的自定义逻辑
        handleCheckbox(isChecked);
        // 再调用react-hook-form的onChange更新表单状态
        onChange(isChecked);
      }}
    />
  )}
/>

方法二：将自定义逻辑整合到register的回调中

如果不想使用Controller，可以在调用register时传入自定义onChange，把你的逻辑嵌入进去，同时不要手动设置checked，让react-hook-form完全控制组件状态：

import { useForm } from "react-hook-form";

const { register, watch } = useForm({
  defaultValues: {
    badCheckbox: false
  }
});

// 自定义register配置，整合你的handleCheckbox逻辑
const checkboxProps = register("badCheckbox", {
  onChange: (e) => {
    // 执行你的自定义勾选逻辑
    handleCheckbox(e.target.checked);
    // register的onChange会自动更新表单状态，无需额外处理
  }
});

<CheckboxInput
  type="checkbox"
  id={id}
  value="BAD"
  {...checkboxProps}
/>

内容的提问来源于stack exchange，提问作者skwFE