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>
    )}
  • 相关阅读:
    js弹出DIV层
    .net 生成静态页面
    新开博客
    随机生成验证码
    ASP.NET错误处理方法总结
    webgis
    看樱花
    今天转载的笑话,挺好笑呵
    用Tomcat插件在Eclipse上搭建可跟踪调试的J2EE WEB开发环境
    关于JSTL的简单说明
  • 原文地址:https://www.cnblogs.com/hcxwd/p/9188878.html
Copyright © 2011-2022 走看看