react-date-presets选范围预设时onClose返回startDate、endDate为undefined如何解决

问题根因 #

• react-date-presets 组件内部事件触发顺序存在差异：
  1. 选择自定义范围时，组件会在完成日期选择后，将最新的起止日期作为入参传入onClose回调
  2. 选择预设范围时，组件仅会将选中的日期范围传入onChange回调，不会同步透传到onClose的入参中，因此直接读取onClose的参数会拿到undefined

修复方案 #

不要依赖onClose的入参获取日期，通过内部state统一存储最新的日期范围，无论哪种选择方式触发的更新都先同步到state，onClose触发时直接读取state内的最新值即可。

代码示例 #

import { useState } from 'react';
import DatePresets from 'react-date-presets';

export default function App() {
  // 全局存储最新日期范围
  const [currentRange, setCurrentRange] = useState({
    startDate: null,
    endDate: null
  });

  // 所有日期选择操作都会先触发onChange，在这里同步更新state
  const handleRangeChange = (range) => {
    setCurrentRange({
      startDate: range.startDate,
      endDate: range.endDate
    });
  };

  const handlePopupClose = () => {
    // 直接从state读取最新值，不需要依赖onClose入参
    const { startDate, endDate } = currentRange;
    // 此处写入你的业务逻辑，可拿到正确的起止日期
    console.log('选中的日期范围：', startDate, endDate);
  };

  return (
    <DatePresets
      onChange={handleRangeChange}
      onClose={handlePopupClose}
      showCustomRange={true}
      // 你原有的其他配置项，如presets、format等保持不变即可
    />
  );
}

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