React倒计时组件

1、首先导入组件

import React, { Component } from 'react';

2、在constructor方法中用this.state定义组件状态

   constructor(props) {
        super(props);
        this.state = {
            timer: null,
            hour: 0,
            minute: 1,
            second: 5,
        }
    }

3、在componentDidMount中创建定时器

        var timer = setInterval(() => {
            if (this.state.hour == 0 && this.state.minute == 0 && this.state.second == 0) 
        {
                clearInterval(this.timer);
            }
            if(this.state.second > 0){
                this.state.second --;
            }else{
                if(this.state.minute > 0){
                    this.state.minute --;
                    this.state.second = 59;
                }else{
                    if(this.state.hour > 0){
                        this.state.hour --;
                        this.state.minute = 59;
                        this.state.second = 59;
                    }
                }
            }
            //触发页面更新
            this.setState({
                hour: this.state.hour,
                minute: this.state.minute,
                second: this.state.second
            })
        }, 1000)

4、保存定时器到组件实例中

        this.setState({
            timer: timer
        })

5、在componentWillUnmount中取消定时器

    componentWillUnmount() {
        //取消定时器
        clearInterval(this.timer)
    }

6、

    render() {
        return (
            <div>倒计时<span>{this.state.hour < 10 ? '0' + this.state.hour : this.state.hour}</span> 时 <span>{this.state.minute < 10 ? '0' + this.state.minute : this.state.minute}</span> 分 <span>{this.state.second < 10 ? '0' + this.state.second : this.state.second}</span>  秒 </div>
        );
    }

最后

export default Counter;

最后

以上就是朴实星星为你收集整理的React倒计时组件的全部内容，希望文章能够帮你解决React倒计时组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。