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

记录下,方便以后使用。

原文地址:https://www.cnblogs.com/snowhite/p/13963956.html