React Hook Form集成Prime React Calendar组件默认值设置问题

问题出在直接将register对象展开传递给PrimeReact Calendar组件——第三方UI组件的value和事件逻辑和原生输入控件不匹配，React Hook Form的默认值无法通过register直接同步到Calendar中。需要用React Hook Form的Controller组件做中间层来适配。

解决方案步骤： #

1. 修改子组件CDatePicker，不再依赖register，改用Controller传递的字段属性
2. 在父组件中用Controller包裹CDatePicker，绑定表单字段

修改后的代码示例 #

父组件使用方式

const { register, handleSubmit, reset, formState: { errors }, control } = useForm({ 
  mode: 'onSubmit', 
  defaultValues: {
    title: "test",
    start: new Date(),
    end: new Date()
  } 
});

// 渲染开始日期选择器
<Controller
  name="start"
  control={control}
  render={({ field }) => (
    <CDatePicker 
      required 
      placeHolder="开始日期" 
      field={field} 
      errors={errors} 
    />
  )}
/>

// 渲染结束日期选择器
<Controller
  name="end"
  control={control}
  render={({ field }) => (
    <CDatePicker 
      required 
      placeHolder="结束日期" 
      field={field} 
      errors={errors} 
    />
  )}
/>

修改后的CDatePicker组件

import React from 'react'
import { Calendar } from 'primereact/calendar';
import { CDatePickerStyled } from './CDatePicker.styled';

export default function CDatePicker({ required, disabled, field, errors, placeHolder }) {
  const { name, value, onChange, onBlur } = field;
  
  return (
    <CDatePickerStyled>
      <Calendar 
        className={errors[name] ? 'p-invalid' : ''} 
        value={value}
        onChange={(e) => onChange(e.value)} // 适配PrimeReact的事件格式，取e.value作为日期值
        onBlur={onBlur}
        placeholder={placeHolder} 
        disabled={disabled}
      />
      {required ? <span className={errors[name] ? 'error' : ''}>Required*</span> : null}
    </CDatePickerStyled>
  )
}

核心原因说明 #

React Hook Form的register是为原生HTML输入控件设计的，而PrimeReact Calendar这类第三方组件有自己的value传递和事件触发逻辑（比如onChange返回的是包含value的事件对象）。Controller组件会帮我们完成值的同步、事件回调的适配，确保默认值能正确传递到Calendar组件中，同时保持表单状态的一致性。

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