使用 onNavigate 中的钩子 React Big Calendar 阻止导航答案

【问题标题】：React Big Calendar using hooks inside onNavigate prevents navigation使用 onNavigate 中的钩子 React Big Calendar 阻止导航
【发布时间】：2021-01-21 15:35:14
【问题描述】：

我正在使用 react-big-calendar 来显示事件，我想调用一个函数来设置 onNavigate 回调中的状态，但是这样做会阻止在日历视图中导航到下个月。

这就是我想要做的，导致日历视图无法导航

const [calendarStartDate, setCalendarStartDate] = useState(new Date());

        <DraggableCalendar
        localizer={localizer}
        defaultView="month"
        events={scheduledTestCases}
        style={{ height: "80%", width: "95%" }}
        views={{week: true, day: true, month: true}}
        onNavigate={(newDate: Date, view: View)=>setCalendarStartDate(newDate)}
      />

目前我可以在 onNavigate 回调中执行此操作，并且导航工作正常

    <DraggableCalendar
    localizer={localizer}
    defaultView="month"
    events={scheduledTestCases}
    style={{ height: "80%", width: "95%" }}
    views={{week: true, day: true, month: true}}
    onNavigate={(newDate: Date, view: View)=>console.log(newDate)}
  />

【问题讨论】：

标签： javascript reactjs react-big-calendar

【解决方案1】：

React-Big-Calendar 具有三个变量，可以是“受控”或“不受控”。当您提供onView、onNavigate 和onSelectEvent 方法时，RBC 希望您自己控制view、date 和selected 的状态。通过提供您自己的 onNavigate 而不提供状态控制的 date 属性，它会调用您的方法，但大多数内部将什么都不做。

【讨论】：