React Hook Form中日期输入框defaultValue失效问题解析

问题现象

在使用React Hook Form处理日期输入框时，开发者经常会遇到一个典型问题：即使设置了defaultValue，type="date"的输入框仍然显示为空。这个问题在表单初始化时尤为明显，导致用户体验不佳。

问题根源分析

这个问题的核心在于React Hook Form的register API与HTML5日期输入框之间的数据类型不匹配。当使用valueAsDate: true选项时，表单内部存储的是Date对象，但HTML日期输入框需要的是"YYYY-MM-DD"格式的字符串。

现有解决方案比较

方案一：使用Controller组件

Controller组件提供了更灵活的值转换方式，可以手动处理Date对象与字符串之间的转换：

<Controller
  control={control}
  name="day"
  render={({field}) => (
    <input
      {...field}
      type="date"
      value={field.value ? field.value.toISOString().substring(0,10) : ''}
      onChange={({target:{value}}) => 
        field.onChange(value ? new Date(value) : null)
      }
    />
  )}
/>

优点：

• 完全控制值的转换过程
• 清晰的类型转换逻辑

缺点：

• 性能略低于register API
• 代码量增加

方案二：使用字符串类型替代Date

另一种思路是在表单中使用字符串类型，然后在提交时转换为Date：

const schema = z.object({
  day: z.string().regex(/^\d{4}-\d{2}-\d{2}$/)
}).transform(input => ({
  day: new Date(input.day)
}));

优点：

• 保持register API的使用
• 与HTML输入框原生兼容

缺点：

• 需要额外的类型转换逻辑
• 表单内部类型与业务类型不一致

深入技术细节

HTML5的日期输入框有其特殊行为：

1. 它只接受"YYYY-MM-DD"格式的字符串
2. 显示的值与value属性严格绑定
3. 不支持直接设置Date对象作为默认值

React Hook Form的register API在处理type="date"时：

1. 当valueAsDate为true时，内部存储Date对象
2. 但不会自动将Date对象转换为HTML需要的字符串格式
3. 导致默认值无法正确显示

最佳实践建议

根据项目需求选择合适方案：

1. 对于简单表单，推荐使用字符串方案，保持类型简单
2. 对于复杂表单或需要严格类型检查的场景，使用Controller方案
3. 考虑封装一个DateInput组件，统一处理类型转换

未来改进方向

React Hook Form可以考虑增强register API，增加类似以下功能：

register("date", {
  format: {
    toInput: (date) => date.toISOString().slice(0,10),
    fromInput: (str) => new Date(str)
  }
})

这种设计既能保持API简洁，又能处理复杂的数据类型转换需求。

总结

日期输入框的默认值问题本质上是类型系统的边界问题。理解HTML输入框的行为特点和React Hook Form的内部机制，可以帮助开发者选择最适合项目的解决方案。在表单开发中，类型系统的设计往往需要在便捷性和严谨性之间做出权衡。