滾動事件后React.js調用函數

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(...);
    } 
  }

scroll事件必須放置在組件內部，並使用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