Question

我构建了一个React组件，假设在窗口滚动事件上调用该函数。

当用户滚动到滚动高度的90％时，我想调用函数“getCards（'default'）。

组件如下所示：

class Home extends React.Component {

  constructor(props) {
    super(props);
    this.handleScroll = this.handleScroll.bind(this);
  }

  componentDidMount() {
    // test
    this.props.getCards('default');
    window.addEventListener('scroll', this.handleScroll);
  }

  handleScroll(event) {
    console.log('scroll event');
  }

有人可以帮助我实现这个目标吗？

谢谢。

Answer 1

您必须使用您的组件，请参阅以下代码：

class Home extends React.Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    // test
    this.props.getCards('default');
  }

  render() {
    return (<div onScroll={this.handleScroll}>...</div>)
  }

  handleScroll(event) {
    var heightBound = window.height * 0.8
    if (heightBound > window.scrollY) {
        // Probably you want to load new cards?
        this.props.getCards(...);
    } 
  }

滚动事件必须放在组件内并使用onScroll evt绑定。处理程序将检查已使用屏幕大小的百分比，并在达到下限限制时加载其他元素。

我希望这有助于：）

Answer 2

我遇到了类似的问题，onScroll对我没有任何帮助。

constructor(props) {
  super(props);
  window.addEventListener('scroll', this.handleScroll, true);
}

handleScroll = (event) =>  { 
  // Your code
}

https://gist.github.com/koistya/934a4e452b61017ad611

React.js滚动事件后调用函数

2 个答案: