PrimeReact 日历组件 onSelect 回调导致日期输入异常问题分析

问题现象

在使用 PrimeReact 日历组件时，开发人员发现当添加 onSelect 回调函数后，日期输入行为会出现异常。具体表现为：在尝试通过键盘编辑日期时，组件会自动将日期重置为之前的值，并将光标移动到末尾，导致无法正常修改日期。

问题复现

在正常使用情况下（未设置 onSelect 回调）：

1. 选择初始日期 15/01/2025
2. 将光标定位在月份部分(01)之后
3. 按退格键两次删除月份，显示为 15//2025
4. 输入数字1，显示为 15/1/2025
5. 再次输入1，成功显示为 15/11/2025

但当设置了 onSelect 回调后（即使是空函数）：

1. 同样选择初始日期 15/01/2025
2. 将光标定位在月份部分(01)之后
3. 按退格键两次删除月份，显示为 15//2025
4. 输入数字1时，日期自动重置为 15/01/2025，光标跳转到末尾
5. 无法继续修改月份部分

问题根源分析

经过代码审查，发现这个问题与日历组件的内部事件处理机制有关。在用户输入时，组件会触发一系列函数调用链：

1. 用户输入触发 onUserInput 函数
2. 调用 updateValueOnInput 函数
3. 触发 updateViewDate 函数
4. 最终导致 onSelect 回调被触发

这个调用链导致了在每次键盘输入时都会执行 onSelect 回调，从而干扰了正常的输入流程。特别是在版本 10.8.3 之后引入的相关修改加剧了这个问题。

解决方案

针对这个问题，开发团队提出了修复方案：

1. 修改事件触发逻辑，确保 onSelect 回调仅在用户点击日期按钮时触发
2. 在键盘输入过程中不触发 onSelect 回调
3. 保持原有的日期选择功能不受影响

这种修改既解决了输入干扰问题，又保持了组件的核心功能完整性。对于需要同时响应键盘输入和选择事件的特殊场景，建议通过其他事件监听方式实现。

最佳实践建议

对于使用 PrimeReact 日历组件的开发人员，建议：

1. 如果不需要处理日期选择事件，可以不设置 onSelect 回调
2. 对于需要处理选择事件的场景，注意测试键盘输入行为
3. 在需要精确控制输入流程时，考虑使用受控组件模式
4. 关注组件更新日志，及时升级到修复版本

这个问题提醒我们在使用 UI 组件库时，需要注意事件回调可能带来的副作用，特别是在涉及用户输入交互的场景中。合理的事件处理设计对于提供流畅的用户体验至关重要。