React-Calendar 月视图更改答案

【问题标题】：React-Calendar month view changeReact-Calendar 月视图更改
【发布时间】：2022-01-06 20:46:15
【问题描述】：

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

【问题讨论】：

标签： javascript reactjs react-calendar

【解决方案1】：

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

activeStartDate={teamStartDate}

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

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

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

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

【讨论】：