javascript - Airbnb/ react 日期 |有没有办法无限滚动月份而不是点击下个月？

Question

我在用于移动浏览器的 Web React 应用程序中有一个 react-dates 组件。该组件垂直显示月 View 。

 <DayPickerRangeControllerWrapper
   orientation="vertical"
   numberOfMonths={3}
   verticalHeight={800}
 />

组件初始化显示 3 个月。要转到下个月，用户需要单击一个按钮。

目标是实现无限滚动 - 通过滚动而不是点击来显示下个月。例如，当用户向下滚动到最后显示的月份时，应该呈现下个月(在本例中为第 4 个月)，依此类推。

我检查了 Docs并找到了 onNextMonthClick 函数，但找不到通过滚动调用它的方法。

我还尝试将 numberOfMonths 设置为一个较大的数字 (24)，但它会导致组件渲染延迟。

是否可以通过滚动而不是点击来逐月延迟加载？

Answer 1

要通过用户滚动呈现月份，您应该向 DOM 添加一个事件监听器，并更新与滚动相关的月份数。

例如:

import React from "react";
import ReactDOM from "react-dom";
import { Grid, Row } from "react-flexbox-grid";
import { DayPickerRangeController } from "react-dates";
import "react-dates/initialize";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { numberOfMonths: 0 };
  }

  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll, { passive: true });
  }

  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }

  handleScroll = (event) => {
    this.setState((state, props) => ({
      numberOfMonths: state.numberOfMonths++
    }));
  };
  render = () => {
    return (
      <Grid>
        <Row>
          <DayPickerRangeController
            orientation="vertical"
            numberOfMonths={this.state.numberOfMonths}
            verticalHeight={800}
          />
        </Row>
      </Grid>
    );
  };
}


ReactDOM.render(<App />, document.getElementById("container"));

codesandbox demo