Material UI DatePicker无法通过onChange与name属性赋值的解决方案咨询

问题背景 #

我通过useState管理表单输入字段状态，借助handleInput函数通过name属性更新对应值，但使用Material UI DatePicker时遇到问题：DatePicker本身无name属性，且它的onChange回调参数不是普通的事件对象（而是选中的日期值），导致当前写法无法正常给openDate这类日期字段赋值。

现有代码 #

表单状态与处理函数：

const initialValues = {
    code: '',
    product: '',
    checked: 'false',
    jobCardNo: '',
    openDate: '',
    completionDate: '',
    serial: '',
    technicalNo: '',
    lineNo: '',
    show: false,
  };
const [values, setValues] = useState(initialValues);

const handleInput = (e: { target: { name: any; value: any } }) => {
  const { name, value } = e.target;
  setValues({
    ...values,
    [name]: value,
  });
};

DatePicker使用代码：

<DatePicker
 value={props.openDate}
 onChange={props.handleInput}
 renderInput={(params) => (
 <TextField name="openDate" {...params} />
 )}
 />

可行解决方案 #

方案1：重构handleInput为字段绑定型函数 #

这种方式逻辑清晰，专门为DatePicker这类非普通输入组件生成绑定指定字段的处理函数，同时兼顾类型安全。

1. 修改handleInput为高阶函数：

// 传入字段名，返回处理该字段的回调函数
const handleInput = (fieldName: string) => (value: Date | null) => {
  // 按需转换日期格式，比如转成YYYY-MM-DD字符串
  const formattedValue = value ? value.toISOString().split('T')[0] : null;
  setValues(prev => ({
    ...prev,
    [fieldName]: formattedValue
  }));
};

2. 调整DatePicker的使用：

<DatePicker
  value={values.openDate ? new Date(values.openDate) : null}
  onChange={handleInput('openDate')}
  renderInput={(params) => <TextField {...params} />}
/>

方案2：兼容原handleInput的参数类型 #

如果不想重构原有函数，可以通过包装DatePicker的onChange参数，模拟普通输入框的事件对象结构，适配原handleInput逻辑。

1. 保留原handleInput，修改类型定义以兼容两种参数：

const handleInput = (e: { target?: { name: string; value: any } } | Date) => {
  if (typeof e === 'object' && 'target' in e) {
    // 普通输入框逻辑
    const { name, value } = e.target;
    setValues({ ...values, [name]: value });
  }
};

2. DatePicker调用时手动包装参数：

<DatePicker
  value={values.openDate ? new Date(values.openDate) : null}
  onChange={(date) => handleInput({ target: { name: 'openDate', value: date } })}
  renderInput={(params) => <TextField name="openDate" {...params} />}
/>

额外注意事项 #

• 日期类型匹配：建议将initialValues中的openDate、completionDate初始值改为null（而非空字符串），与DatePicker的value类型（Date | null）保持一致，避免类型错误：

const initialValues = {
  // ...其他字段
  openDate: null,
  completionDate: null,
  // ...
};

• 日期格式化：根据后端接口需求，将选中的Date对象转换为对应格式的字符串后再存入状态。

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