<script type="text/babel">
class Header extends React.Component{
constructor(){
super();
this.state={
time:new Date().toLocaleTimeString()
}
}
render(){
return(
<div>
<h1>{this.state.time}</h1>
<button onClick={this.handleClick.bind(this)}>开始</button><br/><br/>
<button onClick={this.stopTime.bind(this)}>停止</button>
</div>
)
}
handleClick(){
let self=this;
this.state.timeId=setInterval(function(){
self.setState({
time:new Date().toLocaleTimeString()
})
},1000)
}
stopTime(){
clearInterval(this.state.timeId);
}
}
const ele=(
<div>
<Header/>
</div>
);
ReactDOM.render(
ele,
document.getElementById('app')
)
</script>
</body>
react计时器
最新推荐文章于 2024-06-25 11:59:53 发布