zoukankan      html  css  js  c++  java
  • react短信验证码问题

     <Row gutter={24}>
                      <Col className="gutter-row" span={17}>
                        <div className="gutter-box">
                          <Tooltip placement="bottom" title={this.state.text}>
                            <Input
                              style={{ margin: '15px 0', height: '50px' }}
                              placeholder="请输入验证码"
                              value={this.state.inputValue}
                              onChange={this.onChange.bind(this)} 
                              maxLength="6"
                            />,
                          </Tooltip>
                        </div>
                      </Col>
                      <Col className="gutter-row" span={4}> 
                        <div className="gutter-box">
                          {/* <Button type="primary" size="large" style={{ margin: '15px 0 15px 0', height: '50px', fontSize:'14px'}}>发送验证码</Button> */}
                          <Button
                        disabled={count}
                        className={styles.getCaptcha}
                        size="large"
                        onClick={this.onClickCaptcha}
                        style={{ margin: '15px 0 15px 0', height: '50px', fontSize:'14px'}}
                      >
                        {count ? `${count}s 后重发` : '获取验证码'} 
                      </Button>
                        </div>
                      </Col>
                    </Row>

    公司前几天有这个短信验证码的需求,上面是网页代码

    倒计时方法实现代码为:

    onClickCaptcha = () => {
        let { myUsername } =  this.state
        const _this = this;
        if (myUsername =='' || myUsername.trim()==''){
           message.warn('请输入用户名'); 
        } else {
          // _this.props.dispatch({
          //   type: 'login/getSendMsg',
          //   payload: { myUsername }, 
          // });
          const url = `${getUrl}/dc/av/sms/sendMsg`;  
          console.log(url);
          axios.get(url, {
              params: { loginId: myUsername},
            }).then(function(res) {
                // console.log(res);
                console.log(res.data.message);
            }).catch(function (error) {
              alert(error);
            });
            this.onGetCaptcha();
        }
        console.log(myUsername);
      }
      onGetCaptcha = () => {
        let count = 119;
        this.setState({ count });
        if (this.props.onGetCaptcha) {
          this.props.onGetCaptcha();
        }
        this.interval = setInterval(() => {
          count -= 1;
          this.setState({ count });
          if (count === 0) {
            clearInterval(this.interval);
          }
        }, 1000);
      };

    记录下,方便以后使用。

  • 相关阅读:
    Java IO 之 RandomAccessFile 操作文件内容
    Java IO 之 FileFilter与FilenameFilter
    Java IO 之 File 的创建、重命名与遍历
    Java IO 之 System类
    JVM内存区域配置
    切换 显示与隐藏页面元素
    thead tfoot tbody标签的使用
    使用锚点在HTML页面中快速移动
    ASP.NET Core 项目归档
    检测到有潜在危险的 Request.Form 值 转
  • 原文地址:https://www.cnblogs.com/snowhite/p/13963956.html
Copyright © 2011-2022 走看看