react-dates故事书中的verticall可滚动不正确

Question

我尝试在我的代码的故事书中实现此react-dates示例： http : //airbnb.io/react-dates/? selectedKind=DayPickerRangeController&selectedStory=vertical%20scrollable&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook% 2Factions% 2Factions面板

看来他们显示的关于通过的道具的信息不正确：

就像从先前示例中复制粘贴一样。

因此，故事书示例“垂直滚动”和“具有自定义月份导航的垂直滚动”正在使用不同的功能来加载更多月份，它不能是“显示信息”按钮上显示的“ onPrevMonthClick ”和“ onNextMonthClick ” 。

我需要做的就是，如何覆盖“向下箭头”，以便加载更多或更少的月份。

之前有人提出过这个问题吗？ 谢谢。

Answer 1

要完全覆盖上一个/下一个按钮，我看到的唯一方法是使用您自己的按钮将自己的按钮传递给navPrev / navNext ，当您想停止它们的激活时，它们会使用stopPropagation ：

navNext={
  <button
    onClick={e => {
      const dontGoNext = true;
      if (dontGoNext) {
        // Stop propagation of button and prevent next month from loading
        e.stopPropagation();
      } else {
        // do nothing..
      }
    }}
  >
    Next
  </button>
}

您可以在此处签出示例： https : //codesandbox.io/s/ry87wm8274

这是我看到的唯一方法，是因为导航是通过DayPickerRangeController （ onNextMonthClick ）中的单击处理程序严格控制的，该处理程序可以处理进入下个月的视图的功能。

---

要仅使用DayPickerRangeController 禁用按钮 ，可以设置minDate / maxDate ，从而禁用上一个/下一个按钮。

这两个道具会影响disablePrev / disableNext道具（ Github Lines ），它们会通过DayPicker向下传递到DayPickerNavigation组件。

---

注意：这些道具在DateRangePicker组件中不可用 ，因为它们没有向下传递。 不确定为什么。

---

PS react-dates文档不是最好的IMO。 我总是不得不从源头上了解如何做自己想做的事情。