如何在react-date-range的endDate更新后将showDate设为false？

当然可以实现这个需求——当endDate被设置新值后自动将showDate设为false，只需修改DateRange组件的onChange回调逻辑即可：

修改后的代码示例 #

import { useState } from 'react';
import { DateRange } from 'react-date-range';
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';

function YourComponent() {
  const [showDate, setShowDate] = useState(false);
  const [date, setDate] = useState([
    {
      startDate: new Date(),
      endDate: new Date(),
      key: 'selection',
    }
  ]);

  return (
    <div>
      {/* 示例：点击按钮切换日期选择器显示状态 */}
      <button onClick={() => setShowDate(!showDate)}>选择日期范围</button>
      
      {showDate && (
        <DateRange
          editableDateInputs={true}
          onChange={(item) => {
            // 先更新日期范围状态
            setDate([item.selection]);
            // 判断endDate是否被设置为新值，是则关闭选择器
            const newEndDate = item.selection.endDate;
            const oldEndDate = date[0].endDate;
            if (newEndDate && newEndDate.getTime() !== oldEndDate.getTime()) {
              setShowDate(false);
            }
          }}
          moveRangeOnFirstSelection={true}
          ranges={date}
          showDateDisplay={false}
        />
      )}
    </div>
  );
}

逻辑说明 #

• 在onChange回调中先更新date状态，保存新选择的日期范围
• 通过时间戳对比新旧endDate：如果新的endDate存在且与旧值不同，说明用户刚完成结束日期的设置，此时调用setShowDate(false)关闭日期选择器
• 若只需在完整选择日期范围（同时存在有效startDate和endDate）时关闭，可简化判断条件为if (item.selection.startDate && item.selection.endDate)

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