react hooks 封装短信验证码倒计时
1 点赞
0 条评论
488 次浏览
发布于 8 个月前
用原生js写短信验证码倒计时可能和react的hooks不一样,这里封装一个通用的react短信验证码倒计时hook插件。
代码如下:
/**
* 短信验证码倒计时钩子
* @param formatter: function|undefined
*/
const useSmsCodeCountdown = (opt) => {
const { formatter } = opt || {};
// 倒计时值
const [countdown, setCountdown] = useState(0);
// 倒计时的实例
const [timer, setTimer] = useState(null);
// 默认的格式化文本
const defaultFormatter = (num) => {
if (num) return `重新获取(${num}s)`;
return '获取验证码';
};
// 运行方法
const runHandle = (num) => {
// 设置倒计时值
setCountdown(num);
// 清除倒计时的实例
clearTimeout(timer);
if (num > 0) setTimer(setTimeout(() => runHandle(num - 1), 1000));
};
const formatText = typeof formatter === 'function' ? formatter(countdown) : defaultFormatter(countdown);
return [{ countdown, disabled: countdown > 0, formatText }, runHandle];
};
使用:
const TestSmsCodeCountdown = () => {
const [{ disabled, formatText }, run] = useSmsCodeCountdown();
const onClickHandle = () => {
// 获取短信验证码(60s)
run(60);
};
return (
);
};
"赞助我们,我们才能做的更多&更好"
赞助支持
还没有评论
写下你的评论...
最热文章
好玩的CSS3(3)-- 翻转(旋转正反两张)图片
2065 浏览 · 0 评论
浏览器后退跳转到指定的页面
2037 浏览 · 0 评论
Flutter适配夜间模式
1524 浏览 · 0 评论
JavaScript实现继承的几种方法
1249 浏览 · 0 评论
【面试题】创建长度为100的数组
1173 浏览 · 0 评论
使用dart-sass替换node-sass
822 浏览 · 0 评论
最新文章
centos7中编译安装nginx
86 浏览 · 0 评论
JavaScript计算两个颜色之间的渐变色值
111 浏览 · 0 评论
vue router提供了addRoutes,却没有提供removeRoutes的解决方案
104 浏览 · 0 评论
基于Axios的封装和请求接口的管理
196 浏览 · 0 评论
使用verdaccio搭建私有npm仓库
223 浏览 · 0 评论
pc端常用电脑屏幕分辨率尺寸适配
513 浏览 · 0 评论