react-date-range添加scroll属性后清空日期自动选中今日问题

这是react-date-range开启滚动配置后的原生逻辑bug：当设置scroll={{enabled: true}}时，组件内部会额外挂载滚动监听、视图更新校验逻辑，一旦检测到当前选中范围为空，就会自动把配置的minDate（也就是你代码里设的当日日期）设为选中值，直接覆盖清空操作的结果。
之前无scroll场景下的修复方案只处理了常规渲染模式的焦点回写逻辑，没覆盖滚动模式下的自动校验回填分支，所以加了scroll配置后旧方案失效。

不用改组件源码，加个状态锁拦截错误的自动回填即可，三步就能搞定：

• 首先在业务组件里声明一个ref，用来标记当前是否处于清空操作周期，避免正常选日期的逻辑被拦截

const isClearingRef = useRef(false);

• 调整清空按钮的触发逻辑，执行清空前先上锁，等组件一轮更新执行完再解锁

const handleClear = () => {
  isClearingRef.current = true;
  // 替换成你项目里原本的清空状态逻辑
  setCalendarConfig({
    focusedRange: [0, 0],
    calendarDates: [{
      startDate: null,
      endDate: null,
      key: 'selection'
    }]
  });
  // 如果scroll配置里自定义了滚动动画时长，把这里的延迟改成和动画时长一致即可，默认传0就够用
  setTimeout(() => {
    isClearingRef.current = false;
  }, 0);
};

• 在日期变更、焦点变更的回调里加锁判断，锁生效时直接忽略组件抛出来的错误更新

const handleDatesChange = (item) => {
  // 拦截清空后组件自动选中当日的错误更新
  if (isClearingRef.current) return;
  // 保留你原本的日期更新逻辑
  setCalendarConfig(prev => ({...prev, calendarDates: [item.selection]}));
};

const handleFocusChange = (focusRange) => {
  if (isClearingRef.current) return;
  // 保留你原本的焦点更新逻辑
  setCalendarConfig(prev => ({...prev, focusedRange: focusRange}));
};

这个方案完全不需要移除scroll配置，也不会影响正常选日期、滚动切换月份的交互，锁只在清空操作的极短周期内生效，不会引入额外副作用。

内容的提问来源于stack exchange，提问作者Agustin G.