2016-12-19 7 views
0

ページ上の数値までカウントするカウンタコンポーネントがあります。ユーザーがページ上のその位置にスクロールするものを実行する必要があります。 Waypointでどうすればいいですか?それとも別の解決策がありますか?ウェイポイントを使用してスクロール後に関数を実行する

import React, { Component } from 'react'; 
import Waypoint from 'react-waypoint'; 

var Counter2017 = React.createClass({ 

    getInitialState: function() { 
     return {visionElapsed: 0}; 
    }, 
    tick: function() { 
     if (this.state.visionElapsed < 125) { 
     this.setState({visionElapsed: this.state.visionElapsed + 1}); 
     } 
    }, 
    componentDidMount: function() { 
     this.interval = setInterval(this.tick, 15); 
    }, 
    componentWillUnmount: function() { 
     clearInterval(this.interval); 
    }, 
    render: function() { 
     return (
     <span>{this.state.visionElapsed}</span> 
    ); 
    } 
}); 

export default Counter2017; 

答えて

0

あなたはそれになりたいあなたのウェイポイントを挿入するには(それはDOM要素です)。もちろん

<div> 
    <AnyComponents /> 
    <Waypoint 
    onEnter={() => this.interval = yourInterval} 
    /> 
</div> 

あなたはそれを上書きしないように間隔がすでに存在しているかどうかをチェックすることができます:

は、だから、このようなものを持っているでしょう。また、ウェイポイントコンポーネントにonLeave小道具を設定することもできます。 https://github.com/brigade/react-waypoint

+0

私はReactを初めて使っていますが、これを行う上で私のコンポーネントの実際の例はありますか? –

関連する問題