Antd RangePicker 3.22.0：如何手动触发onChange跳过二次点击？

在Antd 3.x版本的RangePicker中，即使通过onCalendarChange自动补全了日期范围，组件仍会要求二次确认（比如点击日期或OK按钮），这是因为组件内部维护了独立的选中状态，不会直接同步受控属性value的变化。你可以通过以下方式绕过该机制，手动触发确认逻辑：

方案1：直接触发回调函数 #

当你在onCalendarChange中补全日期后，无需等待用户二次点击，主动调用组件的onOk或onChange回调（需确保父组件已传递对应回调）：

// 父组件中定义的onCalendarChange逻辑
const handleCalendarChange = (dates) => {
  let completedDates = [...dates];
  // 补全日期：示例为选中单个日期时，自动添加7天后的日期作为结束值
  if (completedDates.length === 1) {
    completedDates.push(moment(completedDates[0]).add(7, 'days'));
  }
  // 更新受控状态markedDate
  setMarkedDate(completedDates);
  
  // 手动触发onChange（若父组件监听该回调）
  props.onChange?.(completedDates);
  // 或直接触发onOk并关闭弹窗
  props.onOk?.(completedDates);
  props.setIsOpen(false);
};

方案2：通过Ref模拟用户确认操作 #

如果需要完全模拟用户点击OK按钮的行为，可以通过Ref获取RangePicker实例，找到内部确认按钮并触发点击：

1. 给RangePicker添加Ref：

const rangePickerRef = useRef(null);

<DatePicker.RangePicker
  ref={rangePickerRef}
  // 其他原有props...
/>

2. 在补全日期后触发确认按钮：

const handleCalendarChange = (dates) => {
  let completedDates = [...dates];
  if (completedDates.length === 1) {
    completedDates.push(moment(completedDates[0]).add(7, 'days'));
    setMarkedDate(completedDates);
    
    // 延迟确保DOM更新后，找到并点击OK按钮
    setTimeout(() => {
      const calendarDom = rangePickerRef.current?.getCalendarContainer?.();
      const okBtn = calendarDom?.querySelector('.ant-calendar-ok-btn');
      okBtn?.click();
    }, 100);
  }
};

额外优化：强制同步组件状态 #

若受控属性更新后组件内部状态未同步，可给RangePicker添加动态key，当markedDate变为完整数组时触发组件重新渲染：

<DatePicker.RangePicker
  key={JSON.stringify(props.markedDate)}
  // 其他原有props...
/>

此操作会让组件在日期范围补全后重新初始化内部状态，避免停留在“等待选择第二个日期”的状态。

内容的提问来源于stack exchange，提问作者Omri. B