Antd 日期范围选择框选择一个日期后，面板收起

ATWLee

已于 2023-08-04 08:42:30 修改

阅读量673

点赞数

分类专栏： Ant Design 文章标签： antd react

于 2023-07-31 17:22:25 首次发布

本文链接：https://blog.csdn.net/bwater_monster/article/details/132025995

版权

Ant Design 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

文章描述了一个产品优化需求，即在初始只有开始时间的情况下，优化RangePicker组件的行为。当用户选择结束日期时，日期选择面板应直接关闭，提升用户体验。实现这一功能涉及对open属性的控制，以及在onCalendarChange、onFocus和onBlur事件中的逻辑处理，包括设置状态、失焦操作和使用setTimeout来确保面板关闭。

摘要由CSDN通过智能技术生成

需求

初始状态只有开始时间，如下图⬇️

在这里插入图片描述
产品需要优化体验：

点击结束日期
选择日期
下拉面板直接收起，而不是需要选择起始时间

思路

需要一段逻辑的open属性控制
后续操作还是由组件内部控制

逻辑

第一次打开，open控制
选择了（onCalendarChange）并且是选了后边的，改变状态，并失焦。这里要timeout
open判断条件见代码

代码


// 往返日期有个特殊需求，一开始只有起始时间，当选择了终止时间后，直接关闭弹窗，所以要受控一段逻辑的open
const [wfrqOpenAuto, setWfrqOpenAuto] = useState(value?.wfrq?.[1]); // 这个value的格式是：[Moment,null]
const [wfrqOpen, setWfrqOpen] = useState(false);
const wfrqRef = useRef(null);

<RangePicker
 open={wfrqOpenAuto ? undefined : wfrqOpen}
 onCalendarChange={(data, dataStr, info) => {
   if (info.range === 'end' && isEmpty(wfrqOpenAuto)) {
     setWfrqOpen(false);
     const timer = setTimeout(() => {
       wfrqRef.current?.blur();
       setWfrqOpenAuto(dataStr[1]);
       clearTimeout(timer);
     }, 10);
   }
 }}
 onFocus={() => {
   if (isEmpty(wfrqOpenAuto)) {
     setWfrqOpen(true);
   }
 }}
 onBlur={() => {
   if (isEmpty(wfrqOpenAuto)) {
     setWfrqOpen(false);
   }
 }}
 ref={wfrqRef}
/>