如何清除 MUI DatePicker 输入？

Question

我想从@mui/lab (5.0.0-alpha.55) 向DatePicker 添加一个“清除”按钮。

我正在尝试什么：

• 在状态中存储一个date 字段，作为value 属性传递给DatePicker
• 如果需要“清除”值和输入，请将 date 更改为 null

我观察到的行为：

• 如果date 有效，则按预期工作，并清除输入
• 如果date 无效，error 将被清除，但无效日期仍保留在输入中。

我尝试的显示上述行为的基本版本可以看到here。

如果你输入了部分日期，然后点击clear，你可以观察到输入没有被清除。

我宁愿避免涉及更改key 的解决方案，因为这会带来其他问题，例如不尊重将date 更改为null 的外部源，以及需要额外的黑客来尊重@987654336 @transition 清除输入时。

Answer 1

我的理论是，在内部，DatePicker 仅在输入值与最后一个 有效 值不同时更新输入值。以下是该错误的发生方式：

• 你清除DatePicker当有一个有效值时（比如初始的Date），状态一开始重置成功（value=null,inputValue=''）
• 您输入了一些无效的日期。状态现在是 (value=Invalid Date, inputValue='invalid Text')
• 因为当前的value 无效，所以不计算在内，DatePicker 引用了最后一个有效值，而不是null，然后确定当前值没有改变并跳过调度新的输入值(value=null, inputValue='invalid Text')。

我将此归类为来自 MUI 的错误，如果您想修复它，可以在 github 上创建一个 issue。同时，您可以通过使用patch-package 应用此patch 来修复该错误：

• 安装patch-package:npm i patch-package
• 在package.json 中添加postinstall 脚本

"scripts": {
  "postinstall": "patch-package"
}

• 在node_modules\@mui\lab\internal\pickers\hooks\useMaskedInput.js 打开错误文件并根据this 提交更改它。
• 运行npx patch-package @mui/lab 以创建将在您每次再次运行npm i @mui/lab 后应用的补丁。
• 重新启动您的开发服务器。