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