React日历月视图更改

Question

我使用的是反应-日历，无法更改月份，只需单击显示月份名称的导航面板中的箭头(后退/前进)。我的代码：

...
  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={teamStartDate}

正如文档中所述，这会引发一种“受控”行为：

activeStartDate应显示的句点的开始。如果您希望以一种不受控制的方式使用React，请使用defaultActiveStartDate。

因此，如果与用例匹配，可以使用defaultActiveStartDate而不是activeStartDate，或者只需在方法中更新teamStartDate的值，如下所示：

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