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()函数,需要在两个地方去调用,第一个是在发送验证码成功时,第二个是在生命周期钩子函数中。
以上是个人在写项目时的一些见解,如有不对的地方,欢迎指出。