MUI DatePicker默认值异常：点击输入框后占位符变化且无法修改值

问题场景 #

使用@mui/x-date-pickers版本^6.17.0，基于React Hook Form的Controller封装自定义日期选择器组件DatePickerMui时，出现点击输入框后占位符自动变为填充值且无法修改输入内容的问题。尝试在textField的slotProps中设置value和defaultValue属性后，问题仍未解决。

问题原因 #

1. 错误传递属性：给DateTimePicker组件传递了control属性，该属性属于React Hook Form的Controller，MUI日期选择器无需接收此属性，会干扰组件内部状态管理。
2. 表单状态未绑定：未将Controller提供的field.value绑定到DateTimePicker的value属性，导致组件无法与表单状态同步。
3. 手动覆盖状态：在textField中手动设置value为占位符文本，完全覆盖了组件内部的状态值，导致无法正常编辑。

修复后的完整代码 #

import { useState } from 'react';
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
import { Controller } from 'react-hook-form';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { az, enUS } from 'date-fns/locale';
import { useTranslation } from 'react-i18next';

const DatePickerMui = ({
  name,
  title,
  minDate,
  maxDate,
  control,
  myChange,
  isClearable,
  time = false,
  disabled = false,
  defaultValue = null,
  dateFormat = time ? 'dd-MM-yyyy hh:mm' : 'dd-MM-yyyy',
  views = time ? ['year', 'month', 'day', 'hours', 'minutes'] : ['year', 'month', 'day'],
}) => {
  const [open, setOpen] = useState(false);
  const { i18n, t } = useTranslation();

  return (
    <div className="form-group date-component">
      <label style={{ marginBottom: '5px', display: 'block' }}>{title}</label>
      <Controller
        control={control}
        name={name}
        defaultValue={defaultValue}
        render={({ field }) => (
          <LocalizationProvider
            dateAdapter={AdapterDateFns}
            adapterLocale={i18n.language === 'az' ? az : enUS}
          >
            <DateTimePicker
              open={open}
              onOpen={() => setOpen(true)}
              onClose={() => setOpen(false)}
              value={field.value}
              onChange={(newValue) => {
                field.onChange(newValue);
                myChange?.(newValue);
              }}
              format={dateFormat}
              minDate={minDate}
              disabled={disabled}
              maxDate={maxDate}
              views={views}
              slotProps={{
                field: { 
                  clearable: !disabled && isClearable 
                },
                textField: {
                  placeholder: t('datePlaceholder'),
                  onClick: () => setOpen(true),
                },
              }}
            />
          </LocalizationProvider>
        )}
      />
    </div>
  );
};

export default DatePickerMui;

关键修改点 #

• 移除DateTimePicker上多余的control属性，避免干扰组件内部状态逻辑。
• 将Controller提供的field.value绑定到DateTimePicker的value属性，确保组件值与表单状态同步。
• 删除textField中手动设置的value和defaultValue，交由组件内部管理输入状态。
• 简化clearable的判断逻辑，提升代码可读性。

内容的提问来源于stack exchange，提问作者Rahil Əliyev