热爱web前端
技术分享平台

react倒计时组件



// 倒计时 for react
export default class Counter extends React.Component {
    // 定义属性
    static propTypes={
       
        onStep:React.PropTypes.func,
        onComplete:React.PropTypes.func,
        value:React.PropTypes.number,
        step:React.PropTypes.number
    }


    //这里面的操作可以移动到componentWillMount()里面去
    constructor(...pa) {
        super(...pa);
        this.initValue = this.props.value || 10;
        this.state     = {count: this.initValue}
        this.interval  = 0;
        this.step      = this.props.step || 1;
       

    }
    
    stop() {
        clearInterval(this.interval);
    }
    
    start() {
        this.stop();
        this.interval = setInterval(()=> {
            var count = this.state.count - this.step;
            if (this.props.onStep) {
                this.props.onStep(count);
            }
            if (count ==0) {
                this.props.onComplete && this.props.onComplete();
                this.stop();
            }else{
                this.setState({count});
            }
           
        }, 1000);
    }
    
    restart() {
        this.stop();
        this.setState({count: this.initValue});
        this.start();
    }
    componentDidMount(){
        this.start();
    }
    componentWillUnmount(){
        this.stop();
    }
    
    render() {
        return ({this.state.count})
    }
}


未经允许不得转载:前端网(w3cvip) » react倒计时组件

分享到:更多 ()

评论 抢沙发

评论前必须登录!