react 的验证码倒计时

react 的验证码倒计时

constructor(props) {
    super(props);
    this.state = {
        code: '',
        title: '注册/登录',
        count: 60,
        isCode: false,
        codeTitle: '获取验证码',
    };
}

handlechangeCode() {
const that = this;
const timer = setInterval(() => {
if (that.state.count > 0 ) {
const title = that.state.count – + ‘秒后重新发送’;
this.setState(() => ({ codeTitle: title, isCode: true }));
} else {
clearInterval(timer);
that.setState(() => ({ isCode: false, codeTitle: ‘获取验证码’, count: 60}));
}
}, 1000);
}

<label>
    <span>验证码:</span>
    <input className="code" 
        type="text" 
        placeholder="输入验证码"  
        defaultValue={this.state.code} />
    <button className="code-btn" 
        disabled={this.state.isCode} 
        onClick={this.handlechangeCode.bind(this)}>{this.state.codeTitle}
    </button>
</label>