react hooks 封装短信验证码倒计时
1 点赞
0 条评论
2965 次浏览
发布于 2021-10-18 10:49
用原生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 (
);
};
"赞助我们,我们才能做的更多&更好"
赞助支持
还没有评论
写下你的评论...
最热文章
使用dart-sass替换node-sass
5192 浏览 · 0 评论
浏览器后退跳转到指定的页面
3866 浏览 · 0 评论
好玩的CSS3(3)-- 翻转(旋转正反两张)图片
3860 浏览 · 0 评论
Flutter适配夜间模式
3611 浏览 · 0 评论
pc端常用电脑屏幕分辨率尺寸适配
3570 浏览 · 0 评论
最新文章
js通过扫码枪快速录入的实现
406 浏览 · 0 评论
使用 WebSocket 实现你画我猜实时绘图
745 浏览 · 0 评论
基于code-server部署自己的云端vscode
2871 浏览 · 0 评论
支付宝动态收款码生成自定义金额及备注
2863 浏览 · 0 评论
使用 nohup 命令将程序挂载在后台执行
1959 浏览 · 0 评论
基于OpenLayers实现离线地图
2802 浏览 · 0 评论