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项目中登陆注册验证码的倒计时，页面刷新不会重置

最新文章

热门文章