在react中插入计时器

class Counter extends React.Component{

constructor(props,context)
{
super(props,context)
this.state={
hou:0,
second:0,
minutes:0,
strikes:0,
}
this.timer=this.timer.bind(this)//否则this不对
}
timer(){
const nextstrikes =this.state.strikes+50;
this.setState({
hou:parseInt(nextstrikes/3600000)%24,
minutes:parseInt(nextstrikes/60000)%60,
second: parseInt(nextstrikes/1000)%60,
strikes:this.state.strikes+50
})
}
componentDidMount() {
setInterval(this.timer,50);
}//render结束后
render(){
return(
<div>
<h1>{this.state.hou}:{this.state.minutes}:{this.state.second}</h1>
</div>
);

 

}
}
ReactDOM.render(
<Counter/>,document.querySelector('#counter')

)


注意里面的定时函数得下面这样配套使用

var int=self.setInterval("clock()",50)

window.clearInterval(int)

posted @   whhhd  阅读(579)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 什么是nginx的强缓存和协商缓存
· 一文读懂知识蒸馏
· Manus爆火,是硬核还是营销?
点击右上角即可分享
微信分享提示