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);
      };

    记录下,方便以后使用。

  • 相关阅读:
    json-server模拟REST API
    配置mysql使其允许外部ip进行登录
    java版的类似飞秋的局域网在线聊天项目
    微信小程序一键生成源码 在线制作定制功能强大的微信小程序
    nginx下laravel框架rewrite的设置
    高并发服务器架构--SEDA架构分析
    Laravel nginx 伪静态规则
    Laravel配置nginx环境
    Laravel 在 Nginx 中的参考配置两份
    微信小程序wxml和wxss样式
  • 原文地址:https://www.cnblogs.com/snowhite/p/13963956.html
Copyright © 2011-2022 走看看