date-range - React-datepicker 日期范围

Question

我正在为我的应用程序使用 react-typescript。我正在使用 React-datepicker包裹。我想创建一个全局日期范围组件。所以我可以将它重用到不同的组件。我使用 React-datepicker 的 customInput 进行样式设置，并创建了显示时间的按钮。我关注了this link用于日期范围逻辑。在日历日期范围内似乎可行，这是 image .我想在 customInput 的 按钮中显示选择开始日期和结束日期。但是一旦我选择结束日期，两个按钮都会显示结束日期的值。我不知道如何修复它。

这是日期范围组件

import React, { useState } from "react";
import DatePicker, { ReactDatePickerProps } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import moment from "moment";
import { Button } from "components/buttons";

export interface IDatepicker {
  value: {
    start: Date;
    end: Date;
  };
  onBlur?: (i: React.FocusEvent<HTMLInputElement>) => void;
  onFocus?: (i: React.FocusEvent<HTMLInputElement>) => void;
  onChange: (i: Date) => void;
  buttonComponent?: JSX.Element;
  withPortal?: boolean;
  showTimeSelect?: boolean;
  dateFormat?: string;
  timeFormat?: string;
}

export default ({
  value,
  onChange,
  onBlur,
  onFocus,
  buttonComponent,
  withPortal = false,
  showTimeSelect = false,
  dateFormat = "MMMM d, yyyy h:mm aa",
  timeFormat = "HH:mm"
}: IDatepicker) => {

  const handleChange = (date: Date | null) => {
    date && onChange(date);
  };

  return (
    <div style={{ display: "flex" }}>
      <DatePicker
        selected={value.start}
        onChange={handleChange}
        showTimeSelect={showTimeSelect}
        selectsStart
        startDate={value.start}
        endDate={value.end}
        customInput={
          <Button>
            {moment(value.start)
              .format("MMMM Do YYYY")
              .toString()}
          </Button>
        }
      />
      <div style={{ color: "black" }}>-</div>
      <DatePicker
        selected={value.end}
        onChange={handleChange}
        showTimeSelect={showTimeSelect}
        selectsEnd
        startDate={value.start}
        endDate={value.end}
        minDate={value.start}
        customInput={
          <Button>
            {moment(value.end)
              .format("MMMM Do YYYY")
              .toString()}
          </Button>
        }
      />
    </div>

  );
};

这是我正在使用的日期范围组件

import React from "react";

import TimeLine from "components/datepicker";


export default () => {
const [state, setState] = useState(new Date());
  return (
    <div>
      <TimeLine
          value={{ start: state, end: state }}
          onChange={setState}
        />
    </div>
  );
};

Answer 1

您正在为开始和结束使用单一状态值。我认为这是您问题的根本原因。而不是使用

const [state, setState] = useState(new Date());

我认为你应该声明为

const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());