记录antd5.15.0DatePicker 关闭时回填 hover 值闪烁的问题

前言

  在开发中使用antd5.15.0版本的DatePicker组件，在调用其onChange事件时使用了message.success方法，结果发现DatePicker 关闭时回填 hover 值闪烁：

  针对上述问题，antd官方已经在5.17.0版本中修复了此问题（ https://github.com/ant-design/ant-design/pull/48734 ），但要是执意要使用antd5.15.0版本又该如何解决呢？

解决问题

  经过排查，发现在选中日期后关闭弹窗时，弹窗动画延误导致弹窗内子元素还未销毁，鼠标划过其他日期导致回填 hover 值闪烁，那么解决方案就是在弹窗关闭时去掉动画，直接关闭即可。因此可以通过监听onOpenChange事件关闭时将popupClassName改为display：none来关闭动画，实现代码如下：

function App() {
  const [open, setOpen] = useState(false);
  const handleDeadlineChange = (date) => {
    try {
      message.success("截止日期修改成功");
    } catch (error) {
      message.error(error.message);
    }
  };

  const handleOpenChange = (open) => {
    setOpen(open);
  };
  return (
    <DatePicker
        onChange={handleDeadlineChange}
        popupClassName={`${open ? "" : "leave"}`}
        onOpenChange={handleOpenChange}
      />
  );
}

  通过上述方法，就不会出现hover 值闪烁问题

  具体实现demo地址：https://github.com/cai0117/ant-demo