react按钮倒计时效果（发送验证码按钮）

1.今天需要做一个用验证码登陆的功能，所以简单把一个按钮的点击效果分享一下，也是参考了一些资料。先看下效果图

 

Video_2019-07-08_212843.gif

 

想实现这个按钮的效果还是挺简单的，首先分析下需要做哪些工作。

1.点击按钮之后按钮变成不可点击状态。
2.点击按钮之后出现倒计时。

不可点击状态用disabled属性，倒计时就用setInterval()方法了，好了，接下来看看代码。
首先是需要设置的几个状态

 state = {
    btnText: '发送验证码',
    btnBool: false,
  }

然后是按钮的代码。这里用了两个状态，一个是控制按钮的文字btnText,一个是控制按钮的点击状态btnBool,

<Button type='primary' onClick={this.SendVerCode.bind(this)} disabled={this.state.btnBool}>{this.state.btnText}</Button>

重点来了。

//发送短信验证码
  SendCode() {
   this.timer = setInterval(() => {
        if (maxTime > 0) {
          --maxTime
          this.setState({
            btnText: '重新获取' + maxTime,
            btnBool: true
          })
        }
        else {
          this.setState({
            btnText: '发送验证码',
            btnBool: false
          })
        }
      }, 1000)
      axios.ajax({
      //这里写后台接口就行了
      }).then(res => {
     //调用接口的回调
      })
}

对了，在此之前还要定义了一个变量，点击按钮之后的倒计时的时间。

let maxTime  = 60

倒计时结束时，按钮会重新变成可以点击状态。希望对你有所参考价值。
Study hard and make progress every day.