Ant Design DatePicker受控组件异常：所有日期被选中及交互异常

问题表现 #

• 给DatePicker设置value属性启用受控模式后，弹出日历内所有日期被蓝色高亮，如同全部选中
• 鼠标移到日历上时，无需点击就会自动切换日期和月份
• 点击日历返回按钮时，年份会自动变更
• 不传入value的非受控模式下无此异常

问题原因 #

这是Ant Design 5.1.2版本的已知bug，受控模式下组件内部错误地将value与日历的hover、导航状态做了绑定，导致状态逻辑混乱，引发一系列异常交互。

解决方式 #

1. 升级Ant Design版本（推荐） #

该bug在5.2.0及后续版本中已被官方修复，直接升级到最新稳定版本即可彻底解决问题：

npm install antd@latest
# 或使用yarn
yarn add antd@latest

2. 临时兼容方案（无法升级时） #

确保受控值value仅在用户确认选择日期时才更新，避免跟随日历的导航、hover操作触发变更。通过手动维护状态，仅在onChange回调中更新value：

import { useState } from 'react';
import { DatePicker } from 'antd';
import type { Dayjs } from 'dayjs';

const App = () => {
  const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);

  const handleDateChange = (value: Dayjs | null) => {
    // 仅在用户确认选择后更新受控值
    setSelectedDate(value);
  };

  return <DatePicker value={selectedDate} onChange={handleDateChange} />;
};

export default App;

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