zoukankan      html  css  js  c++  java
  • React 60s倒计时

     
    constructor(props) {
      super(props);
      this.state = {
        tel: 13407163853,
        btnText: '获取验证码',
        timer: 60,
        discodeBtn: false,
        clearInterval: false
      }
    }
    ...
    componentWillReceiveProps(nextProps) {
      const { props } = this;
      const { openBox } = nextProps;
      // console.log('nextProps', nextProps);
      // 获取验证码
      if (props.openBox.sendBoxMobileCode !== openBox.sendBoxMobileCode) {
        const { code, message } = openBox.sendBoxMobileCode;
        if (code === '0') {
          this.count();
        } else {
          Toast.info(message);
        }
      }
    }
     
    count = () => {
    let siv = setInterval(() => {
        this.setState({ timer: (timer--), btnText: timer, discodeBtn: true }, () => {
            if (timer === 0) {
                clearInterval(siv);
                this.setState({ btnText: '重新发送', discodeBtn: false })
            }
        });
    }, 1000);
    }
     
    ...
    render() {
      
    return (
      <div>
        <input type="button" value={this.state.btnText} disabled={this.state.discodeBtn} onClick={this.sendCode} />
      </div>
    )}
  • 相关阅读:

    决斗(Headshot )
    密码(Password)
    线性表
    hdu 5409 CRB and Graph(边双联通分量)
    无向图的边双连通分量(EBC)
    hdu 3461 Code Lock 并查集(有点难想到)★★
    hdu 1558 Segment set 计算几何+并查集★
    交表(Send a Table)
    杨辉三角与二项式定理
  • 原文地址:https://www.cnblogs.com/hcxwd/p/9188878.html
Copyright © 2011-2022 走看看