ReactJS日期选择器，如何在日历再次显示时将先前选择的日期设置为默认的月，年，日？

Question

我正在尝试在显示日期选择器时显示先前选择的日期（如果存在）。我有两个应该分别设置的月份和年份以及日历日的下拉菜单。日期选择器始终显示今天的日期，我无法弄清楚如何解决此问题。我是React的新手，非常感谢任何人的帮助。

import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';

const fromMonth = new Date();
const toMonth = new Date("2014-04-01");

function YearMonthForm({ date, localeUtils, onChange }) {

  const months = localeUtils.getMonths();

  const years = [];
  for (let i = fromMonth.getFullYear(); i >= toMonth.getFullYear(); i--) {
    years.push(i);
  }

  const handleChange = function handleChange(e) {
    const { year, month } = e.target.form;
    onChange(new Date(year.value, month.value));
  };

  return (
    <form className="DayPicker-Caption">
      <select name="month" onChange={handleChange} value={date.getMonth()}>
        {months.map((month, i) => (
          <option key={month} value={i}>
            {month}
          </option>
        ))}
      </select>
      <select name="year" onChange={handleChange} value={date.getFullYear()}>
        {years.map(year => (
          <option key={year} value={year}>
            {year}
          </option>
        ))}
      </select>
    </form>
  );
}

class InlineDatePicker extends React.Component {
    constructor(props) {
        super(props);
        this.handleDayClick = this.handleDayClick.bind(this);
        this.handleYearMonthChange = this.handleYearMonthChange.bind(this);
        this.dateChecker = this.dateChecker.bind(this);
        this.state = {
          selectedDay: [this.props.value],
          month: fromMonth,
        };
      }

      handleDayClick(day, { selected }) {
        this.setState({
          selectedDay: selected ? undefined : day,
        });
        if(this.props.onChange) {
          this.props.onChange(day)
        }
      }

      handleYearMonthChange(month) {
        this.setState({ month });
        // this.setState({ selectedDay: month});
      }

      dateChecker() {
        var date = new Date();

        if (this.state.selectedDay[0] != undefined) {
          date = this.state.selectedDay[0];
        } else {
          date = new Date();
        }
        return date;
      }

      render() {
        var date;

        if (this.state.selectedDay[0] != undefined) {
          date = this.state.selectedDay[0];
        } else {
          date = new Date();
        }
        return (
          <div>
            <DayPicker
              // month={this.state.selectedDay[0]}
              month={this.state.month}
              fromMonth={fromMonth}
              toMonth={toMonth}
              selectedDays={this.state.selectedDay}
              onDayClick={this.handleDayClick}
              captionElement={({ date, localeUtils }) => (
                <YearMonthForm
                  date={date}
                  localeUtils={localeUtils}
                  onChange={this.handleYearMonthChange}
                />
              )}
            />
          </div>
        );
      }
}

export default InlineDatePicker;