需求

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

产品需要优化体验：

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

思路

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

逻辑

1. 第一次打开，open控制
2. 选择了（onCalendarChange）并且是选了后边的，改变状态，并失焦。这里要timeout
3. 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}
/>