React-datepicker组件在Storybook正常但应用中onChange不触发

问题描述 #

我是React、TypeScript和Storybook新手，使用react-datepicker库在Storybook中实现了日期范围选择器组件。组件在Storybook里能正常工作，onChange可以返回选中的起止日期，但引入到实际应用（TransactionPage.tsx）后，onChange函数完全无法触发，需要排查问题原因。

版本信息 #

• React：^18.2.0
• react-datepicker：^4.8.0

文件归属 #

• DateRangePicker.tsx、DateRangePicker.type.ts：属于Storybook组件库
• TransactionPage.tsx：实际业务页面

相关代码 #

DateRangePicker.tsx #

const DateRangePicker: React.FC<CalendarProps> = (props) => {
  registerLocale("tr", tr);
  const [dateRange, setDateRange] = useState([null, null]);
  const [startDate, endDate] = dateRange;

  const onDateChange = (dates: any) => {
    const [start, end] = dates;
    setDateRange([start, end]);
  };

  return (
    <DatePicker
      selectsRange={true}
      startDate={startDate}
      endDate={endDate}
      onChange={(dates: any, event) => onDateChange(dates)}
      isClearable={true}
      placeholderText="Tarih Aralığı Seçiniz"
      monthsShown={2}
      adjustDateOnChange={false}
      locale="tr"
    />
  );
};

DateRangePicker.type.tsx #

type NewCalendarProps<CustomModifierNames extends string = never, WithRange extends boolean | undefined = undefined> = {
  selected?: Date | null | undefined;
  onChange(date: WithRange extends false | undefined ? Date | null : [Date | null, Date | null], event: React.SyntheticEvent<any> | undefined): void;
  startDate?: Date | null | undefined;
  endDate?: Date | null | undefined;
  selectsRange?: boolean | undefined;
  locale?: string | Locale | undefined;
  placeholderText?: string | undefined;
  showPreviousMonths?: boolean | undefined;
  monthsShown?: number | undefined;
  adjustDateOnChange?: boolean | undefined;
  onCalendarClose?(): void;
  value?: Date | null | undefined;
  onSelect?(date: Date, event: React.SyntheticEvent<any> | undefined): void;
  children?: React.ReactNode;
  customInput?: React.ReactNode | undefined;
};
export default NewCalendarProps;

TransactionPage.tsx #

import "node_modules/react-datepicker/src/stylesheets/datepicker.scss";
import { DateRangePicker} from "@local/my-ui";

export default function TransactionsPage() {

  const [dateRange, setDateRange] = useState([null, null]);
  const [startDate, endDate] = dateRange;
  const onDateChange = (dates: any) => {
    const [start, end] = dates;
    setDateRange([start, end]);
  };

    return (
      <DateRangePicker
            selected={null}
            onChange={onDateChange}
            startDate={startDate}
            endDate={endDate}
            selectsRange
            onCalendarClose={() => {
              console.log(startDate, endDate);
            }}
            placeholderText="Tarih Aralığı Seçiniz"
            monthsShown={2}
            adjustDateOnChange={false}
          ></DateRangePicker>
)

}

核心问题与修复方案 #

1. 未透传外部onChange回调（根本原因） #

你的DateRangePicker组件内部维护了dateRange状态，但完全没有调用外部传入的props.onChange。Storybook中可能只依赖组件内部状态展示，但实际业务中需要将选中日期同步到外部组件状态，必须在内部状态更新后触发外部回调。

修复后DateRangePicker.tsx：

const DateRangePicker: React.FC<CalendarProps> = (props) => {
  registerLocale("tr", tr);
  // 优先使用外部传入的日期作为初始值，对齐外部状态
  const [dateRange, setDateRange] = useState([props.startDate || null, props.endDate || null]);
  const [startDate, endDate] = dateRange;

  const onDateChange = (dates: any, event: React.SyntheticEvent<any> | undefined) => {
    const [start, end] = dates;
    setDateRange([start, end]);
    // 触发外部传入的onChange，传递选中的日期和事件对象
    props.onChange?.(dates, event);
  };

  return (
    <DatePicker
      selectsRange={true}
      startDate={startDate}
      endDate={endDate}
      onChange={onDateChange}
      isClearable={true}
      // 透传外部属性，避免硬编码
      placeholderText={props.placeholderText || "Tarih Aralığı Seçiniz"}
      monthsShown={props.monthsShown || 2}
      adjustDateOnChange={props.adjustDateOnChange || false}
      locale="tr"
    />
  );
};

2. 属性透传不完整 #

原组件硬编码了placeholderText、monthsShown等属性，没有使用外部传入的值，导致实际应用中设置的属性不生效。修复后改为优先读取props中的值，保持组件的灵活性。

3. 受控/非受控逻辑优化（可选） #

如果希望组件完全由外部状态控制，可以去掉内部状态，改为纯受控组件：

const DateRangePicker: React.FC<CalendarProps> = (props) => {
  registerLocale("tr", tr);
  const startDate = props.startDate || null;
  const endDate = props.endDate || null;

  const onDateChange = (dates: any, event: React.SyntheticEvent<any> | undefined) => {
    props.onChange?.(dates, event);
  };

  return (
    <DatePicker
      selectsRange={true}
      startDate={startDate}
      endDate={endDate}
      onChange={onDateChange}
      isClearable={true}
      placeholderText={props.placeholderText || "Tarih Aralığı Seçiniz"}
      monthsShown={props.monthsShown || 2}
      adjustDateOnChange={props.adjustDateOnChange || false}
      locale="tr"
    />
  );
};

这种模式下，TransactionPage.tsx的现有写法可以直接生效，状态完全由外部维护。

验证方式 #

修改完成后，在TransactionPage.tsx中测试：

• 选择日期范围，检查onDateChange是否触发
• 查看startDate和endDate是否正确更新
• onCalendarClose中的日志应打印最新的选中日期

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