0

我正在使用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 on handler for onActiveStartDateChange，我可以看到日志中的日期已更改，但是，视图仍保留在当前月份。我究竟做错了什么？

4

1 回答 1

0

月视图不会更改，因为它与您在此处提供的值相关：

activeStartDate={teamStartDate}

如文档中所述，这会启动“受控”行为：

activeStartDate应显示的时间段的开始。如果您希望以不受控制的方式使用 React-Calendar，请改用 defaultActiveStartDate。

因此，要么使用defaultActiveStartDate而不是activeStartDate如果它与您的用例匹配，或者您可以简单地更新teamStartDate方法中的值，如下所示：

const onActiveStartDateChange = ({activeStartDate}) => teamStartDate = activeStartDate
于 2022-01-06T12:46:15.730 回答