如何为react-date-range预设范围添加点击回调以修改输入框placeholder

你使用的是react-date-range库的DateRangePicker组件，可通过自定义预设范围配置的方式添加点击回调，下面是两种可行实现方案：

方案1：自定义预设配置直接绑定点击回调（推荐，性能更高） #

你可以重写组件的staticRanges属性，给每个预设选项手动添加点击事件，同时保留原有选择逻辑，示例代码如下：

import { useState } from 'react';
import { DateRangePicker, defaultStaticRanges } from 'react-date-range';
// 别忘了引入组件样式
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';

const YourComponent = () => {
  const [dateState, setDateState] = useState<any>([
    { startDate: null, endDate: null, key: "selection" },
  ]);
  // 存储输入框placeholder的状态
  const [inputPlaceholder, setInputPlaceholder] = useState('请选择日期范围');

  // 给默认预设添加点击回调
  const customStaticRanges = defaultStaticRanges.map(rangeItem => ({
    ...rangeItem,
    onClick: () => {
      // 点击预设时更新placeholder
      setInputPlaceholder(rangeItem.label);
      // 同步更新选中的日期范围
      const rangeValue = rangeItem.range();
      setDateState([{
        ...rangeValue,
        key: 'selection'
      }])
    }
  }))

  return (
    <>
      {/* 你的输入框，绑定placeholder */}
      <input type="text" placeholder={inputPlaceholder} />
      
      {openDateRange && (
        <DateRangePicker
          className="date-range"
          editableDateInputs={true}
          onChange={(item) => setDateState([item.selection])}
          moveRangeOnFirstSelection={false}
          ranges={dateState}
          // 传入自定义的预设配置
          staticRanges={customStaticRanges}
        />
      )}
    </>
  )
}

方案2：日期变更时匹配对应预设标签 #

如果需要兼容用户手动选择日期的场景，可以在onChange回调中匹配当前选中的日期范围对应的预设标签，自动更新placeholder：

// 匹配预设标签的工具函数
const getRangeLabel = (startDate: Date | null, endDate: Date | null) => {
  if (!startDate || !endDate) return '请选择日期范围';
  const matchedRange = defaultStaticRanges.find(item => {
    const presetRange = item.range();
    return presetRange.startDate.toDateString() === startDate.toDateString()
      && presetRange.endDate.toDateString() === endDate.toDateString();
  })
  return matchedRange ? matchedRange.label : '自定义范围';
}

// 修改DateRangePicker的onChange配置
<DateRangePicker
  className="date-range"
  editableDateInputs={true}
  onChange={(item) => {
    const { startDate, endDate } = item.selection;
    setDateState([item.selection]);
    // 更新placeholder
    setInputPlaceholder(getRangeLabel(startDate, endDate));
  }}
  moveRangeOnFirstSelection={false}
  ranges={dateState}
/>

如果需要自定义预设选项的内容、排序，直接替换defaultStaticRanges为你自己定义的预设数组即可，每个预设项需要包含label（显示名称）、range（返回起止日期的方法）两个必填属性。

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