React实现按钮控制倒计时

78 阅读 0 评论 52 点赞

我是靠谱客的博主大意奇迹，最近开发中收集的这篇文章主要介绍React实现按钮控制倒计时，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script
src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var LikeButton = React.createClass({
getInitialState: function(){
return {
count: 30,
liked: true,
flag:true,
stop:true,
};
},
handleClick: function(){
clearInterval(this.timer);
this.state.stop=false;
this.state.flag = !this.state.flag;

if (this.state.flag) {
this.setState({
liked:true,
count: this.state.count
});
}else{
if(this.state.liked){
this.timer = setInterval(function () {
var count = this.state.count;
this.state.liked = false;
count -= 1;
if (count < 1) {
this.setState({
liked: true
});
count = 30;
　　　　　　　　clearInterval(this.timer);
}
this.setState({
count: count
});
}.bind(this), 1000);
}
}

},
render: function(){

var text = this.state.stop ? '点击开始计时' : this.state.count + '秒';
return(
<p>
<button onClick={this.handleClick}>{text}</button>
</p>
)}
});

ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
</script>
</body>
</html>