倒计时
2019-11-05 本文已影响0人
栗子daisy
constructor(props) {
super(props);
this.state = { time: 60, disabled: false, };
}
countDown = () => {
let time = this.state.time;
if (time === 1) {
this.setState({ disabled: false, time: 60, });
} else {
clearInterval(this.Timer);
this.setState({ disabled: true, time: time - 1, });
this.Timer = setTimeout(this.countDown.bind(this), 1000);
} };
handleClick = () => { this.countDown(); };
resetClick = () => {
clearInterval(this.Timer);
this.setState( { disabled: false, time: 60, }, () => this.countDown() );
};
render() {
return (
<div>
<button type="primary" disabled={this.state.disabled} onclick={this.handleClick}>
{this.state.time}
</button>
<button type="primary" onclick={this.resetClick}>
reset
</button>
</div>
)};