React Hook Form中Checkbox事件始终为undefined，Controller无法即时更新状态

1. 修复onChange返回undefined的问题 #

你当前代码中尝试访问e.value，但这并不是Checkbox组件onChange事件传递的正确参数。根据你使用的Checkbox类型，调整方式如下：

• 原生HTML Checkbox：选中状态存储在e.target.checked中
• Material UI等UI库的Checkbox：onChange会传递两个参数，第二个参数直接是布尔类型的选中状态

另外，你注释掉了checked={value}，这是让Checkbox成为受控组件的关键，必须恢复它才能让UI状态与React Hook Form的表单状态同步。

2. 修复表单状态无法即时更新的问题 #

React Hook Form的formState是经过记忆化处理的，需要使用useFormState钩子来获取实时更新的状态值（如isValid、isDirty），而不是直接从useForm的返回值中解构，后者不会动态更新。

修正后的代码示例 #

假设使用Material UI Checkbox： #

import { Controller, useForm, useFormState } from "react-hook-form";
import Checkbox from "@mui/material/Checkbox";

const YourComponent = () => {
  const { control, handleSubmit } = useForm({
    defaultValues: {
      checkbox: false,
    },
  });

  // 获取实时表单状态
  const { isValid } = useFormState({ control });

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

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="checkbox"
        control={control}
        rules={{
          validate: (value: boolean) => value || "请勾选此选项",
        }}
        render={({ field: { onChange, value } }) => (
          <Checkbox
            checked={value}
            onChange={(e, checked) => {
              console.log(checked); // 现在会正确输出true/false
              onChange(checked);
            }}
          >
            Some text
          </Checkbox>
        )}
      />

      {/* 根据表单有效性启用提交按钮 */}
      <button type="submit" disabled={!isValid}>
        提交
      </button>
    </form>
  );
};

export default YourComponent;

若使用原生HTML Checkbox： #

<Controller
  name="checkbox"
  control={control}
  rules={{
    validate: (value: boolean) => value || "请勾选此选项",
  }}
  render={({ field: { onChange, value } }) => (
    <label>
      <input
        type="checkbox"
        checked={value}
        onChange={(e) => {
          console.log(e.target.checked);
          onChange(e.target.checked);
        }}
      />
      Some text
    </label>
  )}
/>

额外注意事项 #

• 确保使用最新版本的react-hook-form，避免已知bug
• 若使用FormProvider，确保Controller的control属性来自Provider提供的useForm实例
• Controller上的defaultValue可以省略，因为已经在useForm的defaultValues中设置了默认值

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