为什么MUI Datepicker结合React Hook Form在生产环境onChange失效

排查步骤&解决方案 #

• 优先检查依赖版本与打包完整性
  确保@mui/lab与@mui/material的版本完全一致，两者版本不匹配会导致组件内部逻辑异常。同时确认moment被放在package.json的dependencies而非devDependencies中，避免生产打包时未被引入。另外你用到了ddd、MMM这类本地化相关的日期格式，要手动引入对应语言的moment本地化文件，防止生产构建时tree shaking将其移除，导致日期解析失败不触发onChange：

  import moment from 'moment';
  import 'moment/locale/zh-cn'; // 替换为你实际使用的语言包
  // LocalizationProvider补充locale属性
  <LocalizationProvider dateAdapter={AdapterMoment} locale={moment.locale('zh-cn')}>
  

• 排查受控弹窗逻辑冲突
  你当前用了自定义的isStartDate状态控制弹窗显隐，MUI Datepicker默认选择日期后会自动触发关闭逻辑，可能存在生产环境下状态更新优先级问题，导致onChange事件被阻断。你可以先移除open、onClose以及TextField的onClick自定义逻辑，用默认的非受控弹窗测试，如果此时生产环境onChange正常触发，说明是自定义受控逻辑存在冲突，可调整为：选择日期后先触发onChange再执行关闭，或者用useCallback包裹状态更新方法避免函数引用频繁变化。

• 移除DatePicker上的readOnly属性测试
  部分MUI版本中，DatePicker根节点的readOnly属性会阻止选择事件冒泡，仅在输入框层级设置只读即可，调整为在renderInput的TextField上添加readOnly属性。

• 检查生产环境控制台报错
  临时开启生产构建的sourcemap与console输出，确认是否存在日期解析错误、适配器初始化失败、value类型不匹配的报错。MUI Datepicker如果内部判定传入的value格式非法，会直接阻断onChange事件触发，你可以在onChange回调中先加一行console打印，确认是否真的没有执行，还是执行后因为值格式问题被React Hook Form过滤了。

• 简化onChange传参
  你当前的onChange写法onChange={(e) => onChange(e)}可以直接简化为onChange={onChange}，避免生产环境下箭头函数的作用域问题导致参数传递异常。

// 调整后的核心代码示例
<LocalizationProvider dateAdapter={AdapterMoment} locale={moment.locale('zh-cn')}>
  <Controller
    name="reminderFromDate"
    control={control}
    rules={{ required: true }}
    render={({ field: { onChange, value } }) => (
      <div className="reminder_form_err_container remeberFieldInput">
        <DatePicker
          className="login_input remeberFieldInput ip-field w-100"
          label="Date"
          mask="___ __ ___, ____"
          inputFormat="ddd D MMM, YYYY"
          value={value}
          disablePast
          onChange={onChange}
          renderInput={(params) => (
            <TextField
              {...params}
              readOnly // 把readOnly移到这里
              onClick={(e) => setStartDate(true)}
            />
          )}
          open={isStartDate}
          onClose={() => setStartDate(false)}
        />
        {errors.reminderFromDate && (
          <span className="reminder_text-danger" role="alert">
            This field is required
          </span>
        )}
      </div>
    )}
  />
</LocalizationProvider>

内容的提问来源于stack exchange，提问作者Prem Kumar Venkatesan