使用react-hook-form结合MUI DatePicker时的类型错误问题

问题原因 #

直接给MUI DatePicker传入{...register("startDate")}会导致类型不匹配：register是为原生表单元素（如<input>）设计的，它返回的props期望onChange接收包含target属性的事件对象，但DatePicker的onChange直接返回Dayjs实例，同时defaultValue的类型也和register要求的结构不兼容，最终触发类型错误。

解决方案 #

使用React Hook Form提供的Controller组件包裹DatePicker，这是官方推荐的处理非受控自定义表单组件的方式，能自动适配自定义组件与React Hook Form的表单控制逻辑。

完整代码示例 #

import { useForm, Controller } from "react-hook-form";
import { LocalizationProvider, DatePicker } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import dayjs from "dayjs";

// 定义表单字段类型
type FormValues = {
  startDate: dayjs.Dayjs | null;
  // 其他表单字段可在此添加
};

export default function VacationForm({ prop }: { prop: { vacation?: { startDate: string } } }) {
  const { control, handleSubmit } = useForm<FormValues>({
    defaultValues: {
      startDate: prop.vacation?.startDate ? dayjs(prop.vacation.startDate) : null,
    },
  });

  const onSubmit = (data: FormValues) => {
    // 替换为你的表单提交逻辑
    console.log("提交的表单数据:", data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* 其他表单输入组件 */}
      <LocalizationProvider dateAdapter={AdapterDayjs}>
        <Controller
          name="startDate"
          control={control}
          render={({ field }) => (
            <DatePicker
              label="From"
              value={field.value}
              onChange={field.onChange}
            />
          )}
        />
        <br />
      </LocalizationProvider>
      <button type="submit">Send</button>
    </form>
  );
}

关键说明 #

• Controller通过name绑定对应的表单字段，control参数传入useForm返回的控制对象，实现表单状态的统一管理
• render函数中的field对象包含value和onChange，直接映射到DatePicker的对应props，自动适配类型
• 表单默认值统一在useForm的defaultValues中配置，避免组件内部重复定义初始值

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