如何清除MUI X Date Picker输入内容 实现自定义清除按钮功能

解决方案 #

这个问题是@mui/lab 5.0.0-alpha.55版本DatePicker的已知内部状态同步缺陷：当传入的value设为null时，组件只会同步有效日期对应的输入框内容，不会覆盖之前输入的无效日期文本。

推荐使用输入框ref手动控制内容的方案，完全避免修改key带来的副作用，具体实现如下：

• 声明输入框ref用于直接操作DOM

import { useRef } from 'react';
const dateInputRef = useRef<HTMLInputElement>(null);

• 给DatePicker内部的TextField绑定ref

<DatePicker
  value={date}
  onChange={(newVal) => setDate(newVal)}
  renderInput={(params) => (
    <TextField
      {...params}
      inputRef={dateInputRef}
      label="选择日期"
    />
  )}
/>

• 清空逻辑同时处理state和输入框文本

const handleClear = () => {
  setDate(null);
  dateInputRef.current?.value = '';
};

该方案完全支持响应外部源修改date为null的场景，也不会破坏原生的label过渡动画效果。如果可以升级依赖，这个bug在后续拆分出的独立包@mui/x-date-pickers v5及以上稳定版本已经被修复，无需额外逻辑直接设置value为null即可正常清空所有输入内容。

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