Material UI DatePicker问题：无法选日期且添加name属性报错

问题现象 #

1. DatePicker无法选择日期，选中后页面无响应；
2. 直接给DatePicker组件添加name属性时，会抛出TypeScript类型错误：

Type '{ name: string; value: any; onChange: any; renderInput: (params: TextFieldProps) => Element; }' is not assignable to type 'IntrinsicAttributes & DatePickerProps<any, any> & RefAttributes<HTMLDivElement>'.
Property 'name' does not exist on type 'IntrinsicAttributes & DatePickerProps<any, any> & RefAttributes<HTMLDivElement>'.

相关代码：

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

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,
    });
  };

原因解析 #

1. 添加name属性报错的原因 #

Material UI的DatePicker组件的Props定义里没有name这个属性，TypeScript会严格校验传入组件的属性是否符合类型定义，所以直接给DatePicker传name会触发类型不匹配错误。name属性应该绑定在renderInput返回的TextField组件上，你代码里的写法是正确的，不需要给DatePicker本身加name。

2. 无法选择日期的原因 #

DatePicker的onChange回调参数和普通表单元素（如input、TextField）不一样：它不会返回带target的事件对象，而是直接返回选中的日期值（可能是Date对象或格式化后的字符串，取决于组件配置）。你当前的handleInput函数试图从e.target解构name和value，但根本取不到这些值，导致state无法更新，所以看起来像是“无法选择日期”。

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