Airbnb / 反应日期 |有没有办法无限滚动几个月而不是点击下个月？

如何解决Airbnb / 反应日期 |有没有办法无限滚动几个月而不是点击下个月？

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

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

组件初始化显示3个月。要进入下个月，用户需要点击一个按钮。

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

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

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

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

解决方法

要通过用户滚动呈现月份，您应该向 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