0

我正在尝试在我的代码中实现这个 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 ”，显示在“显示信息”按钮上.

如何覆盖“向下箭头”以加载更多月份？

以前有人遇到过这个问题吗？

4

1 回答 1

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从而禁用上一个/下一个按钮。

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

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

PS反应日期；文档不是最好的 IMO。我总是不得不查看源代码以了解如何做我想做的事情。

于 2019-02-15T21:23:04.383 回答