react项目中登陆注册验证码的倒计时，页面刷新不会重置

　　目前很多的网站和app在做登陆注册时都会用到手机验证码，为了防止验证码轰炸，也就是随意的点击验证码，一般我们需要对获取验证码进行一些限制，最常用到的是在规定时间内不得重复发送。

　　实现倒计时很简单，可以设置一个计时器，在设置的时间内给获取验证码的按钮添加 disabled=true 属性，可以避免用户重复点击。但是如果用户刷新了页面呢？下面就来记录一下我的解决方案。

　　jsx代码

<p>
      <i className="iconfont icon-yanzhengma"></i>
      <input type="text" placeholder="请输入验证码" onChange={ this.check.bind(this) }/>
      <button className="checkBtn" disabled={ this.state.flag }  onClick={ this.getCheck.bind(this) }>{ this.state.text }</button>
</p>

　　设置初始的状态

this.state = {
      _dura: 0,
      text: '点击获取验证码',
      flag: false
}

　　点击获取验证码事件，这里我用到了 react-cookies 组件要先去安装一下依赖 cnpm i react-cookies -S

 // 获取手机验证码
  getCheck () {
    let tel = this.state.tel
    // console.log(tel)
    if (tel.length !== 0) {
      getCheck(tel).then(data => {
        // 设置cookie保存时间
        cookie.save('sendCode', 60, 60);
        // console.log(data)
        this.setState({
          codeNum: data.data.data, // 保存随机验证码，后期用来验证
          flag: true
        })
        this.sendCode();
      })
    } else {
      Toast.fail('请先输入手机号', 1);
    }
  }

　　封装sendCode(),为了处理页面刷新，倒计时被清除的问题，我们可以在发送了验证码时，设置一个时间，存在cookie里面，并且设置一个定时器，每秒更新一次cookie数据，和倒计时同步，下次在加载页面时，去判断cookie中该时间是否为0；

// 判断cookie中是否存在倒计时
  sendCode () {
    console.log(111)
    this.setState({
      flag: true
    })
    let _dura = cookie.load('sendCode');
    let timer = setInterval(() => {
      console.log(this)
      _dura--;
      let text = '重新获取' + '(' + _dura + ')';
      this.setState({
        _dura,
        text
      })
      cookie.save('sendCode', _dura, _dura)
      if (_dura === 0) {
        text = '点击获取验证码';
        this.setState({
          text,
          flag: false
        })
        clearInterval(timer);
        timer = null;
        cookie.remove('sendCode');
      }
    },1000)
  }

　　在生命周期函数钩子函数componentDidMount()中，调用，每次页面刷新都判断是否存在倒计时

componentDidMount () {
    if (cookie.load('sendCode')) {
      this.sendCode();
    }
  }

　　注意，sendCode()函数，需要在两个地方去调用，第一个是在发送验证码成功时，第二个是在生命周期钩子函数中。

　　以上是个人在写项目时的一些见解，如有不对的地方，欢迎指出。

react项目中登陆注册验证码的倒计时，页面刷新不会重置

猜你喜欢