如何设置react-dates日历始终打开？

Question

我正在使用react-dates library，DateRangePicker，并试图在组件呈现时显示日历。

我以为会有react-dates本身支持的道具，但经过一个小时的搜索，我没有找到它。

import React, { useState  } from 'react';
import { DateRangePicker } from 'react-dates';
import 'react-dates/initialize';
import 'react-dates/lib/css/_datepicker.css';

function Datepicker() {
  const [dateRange, setdateRange] = useState({
    startDate: null,
    endDate: null
  });
  const [focus, setFocus] = useState(null);

  const { startDate, endDate } = dateRange;

  const handleOnDateChange = (startDate, endDate) =>
    setdateRange(startDate, endDate);

  return (
      <DateRangePicker
        startDatePlaceholderText="Start"
        startDate={startDate}
        startDateId="startDate"
        onDatesChange={handleOnDateChange}
        endDatePlaceholderText="End"
        endDate={endDate}
        endDateId="endDate"
        displayFormat="MMM D"
        focusedInput={focus}
        onFocusChange={focus => setFocus(focus)}
      />
  );
}

export default Datepicker;

有没有回调函数可以让我继续打开日历？

或者我应该改变‘react-date/lib/css/_dateicker.css’的默认设置？

Answer 1

我回顾了react-date的源代码，您需要添加此代码以始终显示picker。

const [focus, setFocus] = useState('startDate');

希望这能行得通。