React Hook Form搭配Material UI Date Picker无法获取初始日期问题

React Hook Form默认不会将未初始化、未触发过变更事件的字段纳入提交数据中。你当前的代码没有给dateOfBirth字段设置初始值，所以未修改直接提交时该字段会被忽略；修改日期后触发了onChange事件，字段被注册到表单数据中，就可以正常提交。

二选一即可：

• 方案1：直接在Controller组件上添加defaultValue属性设置初始值，适合单个字段独立设置默认值的场景

<MuiPickersUtilsProvider utils={DateFnsUtils}>
  <Controller
    name="dateOfBirth"
    control={control}
    defaultValue={null} // 可根据需求替换为new Date()设默认当天，或其他指定初始日期值
    render={({ field: { ref, ...rest } }) => (
      <KeyboardDatePicker
        ref={ref}
        margin="dense"
        fullWidth
        id="date-picker-dialog"
        label="Date picker dialog"
        format="MM/dd/yyyy"
        KeyboardButtonProps={{
          "aria-label": "change date",
        }}
        {...rest}
      />
    )}
  />
</MuiPickersUtilsProvider>

• 方案2：在useForm初始化时统一设置表单默认值，适合多字段统一管理的场景

// 初始化useForm时配置
const { control, handleSubmit } = useForm({
  defaultValues: {
    // 其他表单字段的默认值
    dateOfBirth: null // 同样可按需替换为具体日期值
  }
})

提示：如果需要对日期字段做必填校验，初始值设为null即可配合React Hook Form的校验规则正常触发校验

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