React.jsコール機能スクロールイベント

Question

後、私は、ウィンドウのスクロールイベントに関数を呼び出すことが想定されるリアクトコンポーネントを構築しています。 。以下に示すように、スクロールの高さの90％に

私は、関数を呼び出すしたいと思います「getCards（ 『デフォルト』）、ときに、ユーザーのスクロール

コンポーネントが見えます：

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

スクロールイベントは、コンポーネントの内側に配置され、EVTをonScroll使用してバインドされなければなりません。ハンドラは使用されている画面サイズのパーセンテージをチェックし、下限に達すると他の要素をロードします。

は、私は、これは:)

を助けることを願って