react-hook-form非字符串默认值触碰即标记dirty的问题求助

你对问题根源的推测完全正确！react-hook-form的dirtyFields判断是基于值的全等对比（===），当你给Age设置数字默认值30，但<input type="number">实际返回的是字符串类型的"30"时，两者类型不同，就会被判定为字段已修改，从而标记为dirty。

下面给你几个通用的解决办法，覆盖不同场景：

1. 用setValueAs做实时类型转换（推荐简单场景） #

在register配置里添加setValueAs，把输入的字符串转成数字，确保字段值和默认值类型一致：

<input 
  type="number" 
  name="Age" 
  ref={register({
    // 把输入值转成数字，空值时返回0（可根据业务调整）
    setValueAs: value => parseInt(value, 10) || 0
  })} 
/>

这样一来，输入框的字符串会被实时转换成数字，和默认的30（数字）对比时，未修改的情况下就不会触发dirty标记了。

2. 使用Controller组件（适合复杂/第三方组件场景） #

如果你的字段需要更精细的控制，或者用了Ant Design、MUI这类第三方表单组件，Controller能更灵活地处理值的同步和转换：

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

// 初始化useForm时保留原默认值
const { control, formState: { dirtyFields } } = useForm({
  mode: "onChange",
  defaultValues: { ...defaults }
});

// 替换原Age输入框为Controller包裹的组件
<Controller
  name="Age"
  control={control}
  render={({ field }) => (
    <input 
      type="number" 
      {...field}
      // 处理初始值为空的边界情况
      value={field.value ?? ""}
      // 手动把输入的字符串转成数字后再传给onChange
      onChange={e => field.onChange(e.target.value ? parseInt(e.target.value, 10) : 0)}
    />
  )}
/>

Controller会帮你统一管理字段的状态，确保值的类型始终和默认值匹配。

3. 批量处理数字字段（优化技巧） #

如果表单里有多个数字字段，可以封装一个自定义的register函数，避免重复代码：

// 封装数字字段专用的register
const registerNumber = (options = {}) => register({
  ...options,
  setValueAs: value => parseInt(value, 10) || 0
});

// 使用时直接调用
<input type="number" name="Age" ref={registerNumber()} />
<input type="number" name="Salary" ref={registerNumber({ required: true })} />

补充说明 #

如果你只是临时解决，把默认值改成字符串"30"也能生效，但这种方式需要在提交表单时再把字符串转回数字，不如前面两种方法从根源上解决类型不一致的问题。

核心原则就是：确保字段的当前值和默认值的类型完全一致，这样react-hook-form的全等对比才会准确，dirty标记就不会误触发了。

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