Material UI DatePicker无法触发onChange及用name属性更新值的求助

Material UI DatePicker的onChange回调参数是选中的日期值（而非普通input的事件对象），且组件本身没有name属性，因此原有依赖e.target.name的handleInput无法直接适配。以下是两种可行的解决思路：

方法一：修改handleInput兼容两种参数类型 #

调整handleInput，使其既能处理普通input的事件对象，也能接收自定义的name和value参数，实现统一处理：

const initialValues = {
  code: '',
  product: '',
  checked: 'false',
  jobCardNo: '',
  openDate: null, // 注意：日期字段初始值建议设为null而非空字符串，匹配DatePicker的value类型
  completionDate: null,
  serial: '',
  technicalNo: '',
  lineNo: '',
  show: false,
};
const [values, setValues] = useState(initialValues);

const handleInput = (input: { target: { name: string; value: any } } | { name: string; value: any }) => {
  const { name, value } = 'target' in input ? input.target : input;
  setValues({
    ...values,
    [name]: value,
  });
};

在DatePicker中调用时，直接传递指定name的对象：

<DatePicker
  value={values.openDate}
  onChange={(newValue) => handleInput({ name: 'openDate', value: newValue })}
  renderInput={(params) => <TextField {...params} />}
/>

方法二：编写独立的日期处理函数 #

如果不想改动原有handleInput逻辑，可以单独为DatePicker编写处理函数，显式指定字段名更新状态：

// 新增日期处理函数
const handleDateChange = (newValue: Date | null, fieldName: string) => {
  setValues(prev => ({ ...prev, [fieldName]: newValue }));
};

DatePicker的使用方式：

<DatePicker
  value={values.openDate}
  onChange={(newValue) => handleDateChange(newValue, 'openDate')}
  renderInput={(params) => <TextField {...params} />}
/>

注意事项 #

• DatePicker的value类型为Date | null，需确保initialValues中对应字段的类型与之匹配（避免用空字符串初始化日期字段）。
• 若使用TypeScript，建议为handleInput或handleDateChange添加明确的类型定义，避免类型报错。

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