reactjs - 如何清除 MUI DatePicker 输入？

Question

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

我正在尝试:

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

我观察到的行为:

• 如果 date 有效，它按预期工作，输入被清除
• 如果date无效，错误被清除，但无效日期仍保留在输入中。

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

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

我宁愿避免涉及更改 key 的解决方案，因为这会带来其他问题，例如不尊重外部源将 date 更改为 null，并且在清除输入时需要额外的 hack 来遵守 label 转换。

Answer 1

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

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

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

• 安装补丁包:npm i 补丁包
• 在package.json中添加postinstall脚本

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

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