react-hook-form Date类型defaultValues未在date输入框渲染问题咨询

问题根源 #

HTML 原生type="date"输入框仅支持YYYY-MM-DD格式的字符串作为有效值，直接传入Date类型对象无法被识别，因此会显示默认的日期占位符。

解决方案 #

不需要逐个给输入框设置defaultValue，只要做两处通用处理即可：

1. 预处理默认值对象，统一把所有Date类型的属性转为YYYY-MM-DD格式字符串
2. 给日期类输入框的register配置添加valueAsDate: true，保证提交时返回的值还是Date类型，和你定义的Person类型兼容

代码示例

首先定义通用的默认值处理工具函数：

// 自动遍历对象，将所有Date类型属性转为YYYY-MM-DD格式字符串
const formatDateDefaults = <T extends Record<string, any>>(obj: T) => {
  const processed = {...obj};
  Object.keys(processed).forEach(key => {
    const val = processed[key];
    if (val instanceof Date) {
      processed[key] = `${val.getFullYear()}-${String(val.getMonth() + 1).padStart(2, '0')}-${String(val.getDate()).padStart(2, '0')}`;
    }
  });
  return processed as T;
};

修改你的业务代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { useForm } from "react-hook-form";

type Person = {
  firstname :string;
  lastname :string;
  dob : Date;
}

const App = (person: Person) => {
  // 传入处理后的默认值
  const { register, handleSubmit } = useForm<Person>( {defaultValues: formatDateDefaults(person)});
  
  const onSubmit = handleSubmit((data) => {
    // 此处data.dob仍为Date类型，符合Person类型定义
    alert(JSON.stringify(data))
  })

  return (    
    <form onSubmit={onSubmit}>
      <input {...register("firstname", {required : 'Required'})} id = "firstname" type="text"/>
      <input {...register("lastname", {required : 'Required'})} id = "lastname" type="text"/>
      {/* 添加valueAsDate配置，提交时自动将字符串转为Date对象 */}
      <input {...register("dob", {required : 'Required', valueAsDate: true})} id = "dob" type="date"/>      
      <input type="submit" />
    </form>
  );
}

ReactDOM.render(
  <React.StrictMode>
    {/* 注意JS的Date月份从0开始计数，12对应次年1月，要表示2002年12月请传11 */}
    <App firstname = "Joe" lastname = "Blogs" dob = {new Date(2002,11,31)} />
  </React.StrictMode>,
  document.getElementById('root')
);

如果你的表单内日期字段较多，不想逐个添加valueAsDate配置，可以进一步封装自定义的注册函数，自动根据字段类型匹配对应的配置项，不需要逐个修改输入框代码。

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