React Hook Form中checkbox触发onChange时如何读取最新值

react-hook-form 完全支持该需求，无需引入额外依赖即可实现，以下是两种常用实现方案：

方案1：在register配置中自定义onChange回调 #

这是最轻量的实现方式，你在给复选框注册字段时，直接传入onChange配置项即可在每次勾选/取消勾选时拿到最新值，该回调不会覆盖react-hook-form内部的状态同步逻辑，无需手动更新表单值。

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

export default function DemoForm() {
  const { register } = useForm({
    defaultValues: {
      agreeTerm: false // 复选框默认值
    }
  });

  return (
    <form>
      <label>
        <input
          type="checkbox"
          {...register('agreeTerm', {
            onChange: (e) => {
              // 直接从事件对象取最新勾选状态
              const latestValue = e.target.checked;
              console.log('复选框最新值:', latestValue);
              // 此处编写值变更后需要触发的业务逻辑
            }
          })}
        />
        同意相关条款
      </label>
    </form>
  );
}

方案2：使用watchAPI监听字段值变化 #

如果你需要在组件的其他位置（比如JSX渲染逻辑、副作用函数中）复用这个复选框的实时值，可以用watch监听对应字段，字段值变更时会自动触发组件重渲染，你始终能拿到最新状态：

import { useForm } from 'react-hook-form';
import { useEffect } from 'react';

export default function DemoForm() {
  const { register, watch } = useForm({
    defaultValues: {
      agreeTerm: false
    }
  });

  // 实时监听agreeTerm字段的值
  const agreeTermValue = watch('agreeTerm');

  // 可以搭配useEffect执行值变更后的副作用
  useEffect(() => {
    console.log('复选框最新值:', agreeTermValue);
  }, [agreeTermValue]);

  return (
    <form>
      <label>
        <input type="checkbox" {...register('agreeTerm')} />
        同意相关条款
      </label>
      <p>当前勾选状态：{agreeTermValue ? '已勾选' : '未勾选'}</p>
    </form>
  );
}

如果你是通过Controller/useController封装受控复选框组件，直接在组件的onChange事件回调中取值即可，逻辑和方案1一致。

内容的提问来源于stack exchange，提问作者Kevin.a