Изменение представления месяца React-Calendar

Question

Я использую React-Calendar, и я не могу изменить месяц, щелкая стрелки (назад / вперед) на панели навигации, где отображается название месяца. Мой код:

      ...
  const onActiveStartDateChangeHandler = ({ activeStartDate, value, view }) => {
    console.log("vv:", activeStartDate, value, view);
  };

...
  return (
    <div className="popupFormSelector arrowLft pb-8">
      <h2 className="text-center font-bold mt-7 mb-5">Set a deadline</h2>
      <Delete classes="right-5 top-5" onClickHandler={toggleCalendar} />
      <Calendar
        activeStartDate={teamStartDate}
        calendarType="US"
        defaultView="month"
        maxDetail="month"
        maxDate={endDate}
        minDate={teamStartDate}
        next2Label={null}
        onActiveStartDateChange={onActiveStartDateChangeHandler}
        onChange={onChangeHandler}
        prev2Label={null}
        selectRange={false}
        showDoubleView={false}
        showFixedNumberOfWeeks={false}
        showNavigation={true}
        showNeighboringMonth={true}
        tileClassName={tileClasses}
        tileDisabled={({ activeStartDate, date, view }) =>
          date < teamStartDate || date > endDate
        }
        value={new Date()}
        view={"month"}
      />

Из console.log в обработчике для onActiveStartDateChange, Я вижу, что дата изменилась в журнале, однако представление остается в текущем месяце. Что я делаю неправильно?

Answer 1

Представление месяца не изменится, потому что оно привязано к значению, которое вы указали здесь:

activeStartDate={теамстартдате}

Как указано в документах , это инициирует «контролируемое» поведение:

activeStartDate Начало отображаемого периода. Если вы хотите использовать React-Calendar неконтролируемым образом, вместо этого используйте defaultActiveStartDate.

Так что либо используйте defaultActiveStartDateвместо activeStartDateесли он соответствует вашему варианту использования, или вы можете просто обновить значение teamStartDateв методе вот так:

      const onActiveStartDateChange = ({activeStartDate}) => teamStartDate = activeStartDate