用react写一个验证码60s倒计时防刷效果 |
您所在的位置：网站首页 › 未能获取到短信验证码,请重新发送后再试 › 用react写一个验证码60s倒计时防刷效果 |
|
说明：
我们这里做一个验证码点击60s防刷的效果，主要用到了浏览器内存机制来存储代码刷新的剩余时间，以防刷新后页面数据清除。 方法也很简单，就是在代码开始时获取storage里面的值，将其附着到state上就可以了，点击的时候使用计时器来控制时间的减少。 代码中用到了reduxform和antd， 不过这些主要是用来做验证和样式，并不影响实现逻辑，主要还是js为主。 开始工作首先是state state = { time: 60, // 规定起始时间60s }然后是生命周期函数,其实只要是在执行代码开头获取到storage里面的数值就可以了，不一定非得用生命周期，hooks也行。 componentDidMount() { let time = sessionStorage.getItem("time") if (time > 0 && time < 60) { this.setState({ time }) setTimeout(() => this.onGetCode(), 0); } } 下面是业务逻辑代码 post = async (data) => { // 提交代码 } // 点击验证码触发计时器 getCode = () => { setTimeout(() => this.onGetCode(), 0); } //异步判断过程，也是业务逻辑最主 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |