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"}
      />

從onActiveStartDateChange console.log 處理程序中，我可以看到日志中的日期已更改，但是，視圖仍保留在當前月份。 我究竟做錯了什么？

Answer 1

月視圖不會更改，因為它與您在此處提供的值相關聯：

activeStartDate={teamStartDate}

正如文檔中所述，這會啟動“受控”行為：

activeStartDate應顯示的周期的開始。 如果您希望以不受控制的方式使用 React-Calendar，請改用 defaultActiveStartDate。

因此，如果它與您的用例匹配，請使用defaultActiveStartDate而不是activeStartDate ，或者您可以簡單地更新方法中teamStartDate的值，如下所示：

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