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;