React封装倒计时按钮
背景
在开发过程中,经常需要使用到倒计时的场景,当用户点击后,按钮进行倒计时,然后等待邮件或者短信发送,每次都写重复代码,会让代码显得臃肿,所以封装一个组件来减少耦合
创建一个倒计时组件

编辑基本框架
设计3个参数,一个是倒计时时长,一个是开始时执行的方法,一个是展示文本
import React, { useState, useEffect, useRef } from 'react';
import { Button } from 'antd';// 定义 CountdownButton 的属性接口
interface CountdownButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {countdownTime?: number;text?: string;onStart?: () => void;
}const CountdownButton: React.FC<CountdownButtonProps> = ({ countdownTime = 60, text = '获取验证码', onStart, ...restProps }) => {const [isDisabled, setIsDisabled] = useState(false);const [buttonText, setButtonText] = useState(text);// 使用useRef来保存倒计时的当前值,避免状态重置const countdownRef = useRef(countdownTime);const intervalRef = useRef<number | null>(null);return (<Button >{buttonText}</Button>);
};export default CountdownButton;
实现倒计时方法
实现剩余时间修改方法
// 使用自定义的setCountdownRef函数来更新倒计时值const setCountdownRef = (update: (current: number) => number) => {const newCountdown = update(countdownRef.current);countdownRef.current = newCountdown;};
实现开启倒计时方法
const handleStartCountdown = () => {// 立即更新按钮文本和状态setButtonText(`${countdownRef.current}s后重试`);setIsDisabled(true);if (typeof onStart === 'function') {onStart();}// 如果已经有定时器存在,则清除它if (intervalRef.current !== null) {clearInterval(intervalRef.current!);}intervalRef.current = setInterval(() => {setButtonText(`${countdownRef.current}s后重试`);setCountdownRef((prevCountdown) => {if (prevCountdown <= 1) {clearInterval(intervalRef.current!);intervalRef.current = null;setButtonText(text);setIsDisabled(false);return countdownTime; // 重置倒计时时间}return prevCountdown - 1;});}, 1000);
实现清楚定时器方法
// 清除定时器useEffect(() => {return () => {if (intervalRef.current !== null) {clearInterval(intervalRef.current!);}};}, []);
完整代码
import React, { useState, useEffect, useRef } from 'react';
import { Button } from 'antd';// 定义 CountdownButton 的属性接口
interface CountdownButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {countdownTime?: number;text?: string;onStart?: () => void;
}const CountdownButton: React.FC<CountdownButtonProps> = ({ countdownTime = 60, text = '获取验证码', onStart, ...restProps }) => {const [isDisabled, setIsDisabled] = useState(false);const [buttonText, setButtonText] = useState(text);// 使用useRef来保存倒计时的当前值,避免状态重置const countdownRef = useRef(countdownTime);const intervalRef = useRef<number | null>(null);// 清除定时器useEffect(() => {return () => {if (intervalRef.current !== null) {clearInterval(intervalRef.current!);}};}, []);const handleStartCountdown = () => {// 立即更新按钮文本和状态setButtonText(`${countdownRef.current}s后重试`);setIsDisabled(true);if (typeof onStart === 'function') {onStart();}// 如果已经有定时器存在,则清除它if (intervalRef.current !== null) {clearInterval(intervalRef.current!);}intervalRef.current = setInterval(() => {setButtonText(`${countdownRef.current}s后重试`);setCountdownRef((prevCountdown) => {if (prevCountdown <= 1) {clearInterval(intervalRef.current!);intervalRef.current = null;setButtonText(text);setIsDisabled(false);return countdownTime; // 重置倒计时时间}return prevCountdown - 1;});}, 1000);// 立即减少一次倒计时,使首次显示正确的剩余时间setCountdownRef((prevCountdown) => prevCountdown - 1);};// 使用自定义的setCountdownRef函数来更新倒计时值const setCountdownRef = (update: (current: number) => number) => {const newCountdown = update(countdownRef.current);countdownRef.current = newCountdown;};return (<Button {...restProps} onClick={handleStartCountdown} disabled={isDisabled}>{buttonText}</Button>);
};export default CountdownButton;
使用方法
<CountdownButton countdownTime={60} text={"获取验证码"} onStart={sendMsg} type="primary" />
效果

相关文章:
React封装倒计时按钮
背景 在开发过程中,经常需要使用到倒计时的场景,当用户点击后,按钮进行倒计时,然后等待邮件或者短信发送,每次都写重复代码,会让代码显得臃肿,所以封装一个组件来减少耦合 创建一个倒计时组件…...
深入探究Linux树状目录结构
Linux 作为一款广泛使用的开源操作系统,其目录结构采用了树状设计,这种结构清晰、有条理,便于用户和系统进行文件管理与操作。 一、根目录(/) 根目录是整个 Linux 文件系统的起始点,就像一棵大树的根部&…...
Realsense相机驱动安装及其ROS通讯配置——机器人抓取系统基础系列(四)
文章目录 概要1 Realsense相机驱动安装Method1: 使用Intel服务器预编译包Method2: 使用ROS服务器预编译包Method3: 使用SDK源代码方法对比总结 2 Realsense-ROS通讯配置与使用2.1 Realsense-ROS包安装2.2 ROS节点启动 小结Reference 概要 本文首先阐述了Realsense相机驱动安装…...
linux安装nvm
下载命令 wget https://github.com/nvm-sh/nvm/archive/refs/tags/v0.39.1.tar.gz当前盘打开终端后的nvm文件夹中 mkdir -p /nvm/.nvm如果树根不够就用加sudo 解压文件 tar xvf v0.39.1.tar.gz输入pwd 确定当前文件完成路径 在当前文件中写入。bashrc文件及代码回车进入编辑…...
图论1-问题 C: 算法7-6:图的遍历——广度优先搜索
题目描述 广度优先搜索遍历类似于树的按层次遍历的过程。其过程为:假设从图中的某顶点v出发,在访问了v之后依次访问v的各个未曾被访问过的邻接点,然后分别从这些邻接点出发依次访问它们的邻接点,并使“先被访问的顶点的邻接点”先…...
基于 STM32 的多功能时间管理器项目
引言 在快节奏的生活中,时间管理显得尤为重要。本项目旨在通过 STM32 开发一个多功能时间管理器,功能包括计时器、闹钟和日历。用户可以方便地设置不同的提醒和计时任务,以更好地管理日常生活和工作。 项目名称 多功能时间管理器 环境准备 …...
Java工程结构:二方库依赖规约
文章目录 I jar 包分类一方库:二方库:三方库:II 专有名词GAV(GroupId、ArtifactId、Version):Maven 坐标III GAV 规则GroupId 格式ArtifactId 格式二方库版本号命名方式:主版本号.次版本号.修订号I jar 包分类 一方库: 本工程内部子项目模块依赖的库(jar 包)。 二…...
Django自带admin管理系统使用
1、admin路径地址 localhost:8000/admin 2、使用命令行创建超级管理员 python manage.py createsuperuser 之后按照提示一步一步往下走就好了。 3、修改管理员密码 python manage.py changepassword admin admin是超级管理员的账号 4、后台管理系统注册模型,…...
Jmeter 简单使用、生成测试报告(一)
一、下载Jmter 去官网下载,我下载的是apache-jmeter-5.6.3.zip,解压后就能用。 二、安装java环境 JMeter是基于Java开发的,运行JMeter需要Java环境。 1.下载JDK、安装Jdk 2.配置java环境变量 3.验证安装是否成功(java -versio…...
手摸手实战前端项目CI CD
由于图片和格式解析问题,为了更好阅读体验可前往 阅读原文 CI/CD 是 持续集成(Continuous Integration) 和 持续交付/部署(Continuous Delivery/Continuous Deployment) 的缩写,是现代软件开发中的一种自动…...
【Elasticsearch】搜索类型介绍,以及使用SpringBoot实现,并展现给前端
Elasticsearch 提供了多种查询类型,每种查询类型适用于不同的搜索场景。以下是八种常见的 Elasticsearch 查询类型及其详细说明和示例。 1. Match Query 用途:用于全文搜索,会对输入的文本进行分词,并在索引中的字段中查找这些分…...
K8S中的Pod调度之亲和性调度
亲和性调度 亲和性调度是一种比硬性指定节点(使用 nodeName 或 nodeSelector)更灵活的调度策略,它允许定义一组规则,根据这些规则,调度器会尝试将 Pod 调度到最合适的节点上,但如果找不到完全匹配的节点&a…...
高等数学学习笔记 ☞ 不定积分的积分法
1. 第一换元积分法 1. 基础概念:形如的过程,称为第一换元积分法。 2. 核心思想:通过对被积函数的观察(把被积函数的形式与积分表的积分公式进行比较),把外部的部分项拿到的内部(求原函数), 然后进行拼凑,…...
【HTTP】详解
目录 HTTP 基本概念啥是HTTP,有什么用?一次HTTP请求的过程当你在浏览器中输入一个浏览器地址,它会发送什么 ?---(底层流程)HTTP的协议头请求头(对应客户端)一些请求头请求方法 响应头…...
cursor重构谷粒商城01——为何要重构谷粒商城
前言:这个系列将使用最前沿的cursor作为辅助编程工具,来快速开发一些基础的编程项目。目的是为了在真实项目中,帮助初级程序员快速进阶,以最快的速度,效率,快速进阶到中高阶程序员。 本项目将基于谷粒商城…...
如何在 ASP.NET Core 中实现速率限制?
在 ASP.NET Core 中实现速率限制(Rate Limiting)中间件可以帮助你控制客户端对 API 的请求频率,防止滥用和过载。速率限制通常用于保护服务器资源,确保服务的稳定性和可用性。 ASP.NET Core 本身并没有内置的速率限制中间件&…...
STM32-笔记43-低功耗
一、什么是低功耗? 低功耗是指通过优化设计和采用特定的技术手段,降低电子设备在运行过程中消耗的能量,从而延长电池寿命、提高性能和减少发热。低功耗设计主要从芯片设计和系统设计两个方面进行,旨在减少所有器件的功率损耗&am…...
Facebook 隐私风波:互联网时代数据安全警钟
在社交媒体飞速发展的今天,个人数据的隐私保护已成为全球关注的焦点。作为全球最大的社交平台之一,Facebook面临的隐私问题,尤其是数据泄露事件,频繁引发公众的广泛讨论。从用户信息被滥用到数据泄漏,Facebook的隐私挑…...
Java 中的 ZoneOffset
介绍 在我们的这个世界上因为地球是圆的,所以每个国家都会有自己特定的时区。 时区在我们对时间的使用上扮演了非常重要的角色。但又因为时区的存在,又给我们带来了很多的麻烦,比如北美地区使用的夏令时和中国统一使用东 8 区的时间等。 当…...
amis模板语法、数据映射与表达式
模板字符串 表达式中获取变量 可以支持在普通文本中,使用数据映射语法:${xxx} 获取数据域中变量的值 "Hello ${text}"渲染 html 使用数据映射语法:${xxx} 获取数据域中变量的值,并渲染 HTML "<h1>Hello<…...
在Ubuntu中设置开机自动运行(sudo)指令的指南
在Ubuntu系统中,有时需要在系统启动时自动执行某些命令,特别是需要 sudo权限的指令。为了实现这一功能,可以使用多种方法,包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法,并提供…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况,可以通过以下几种方式模拟或触发: 1. 增加CPU负载 运行大量计算密集型任务,例如: 使用多线程循环执行复杂计算(如数学运算、加密解密等)。运行图…...
微信小程序云开发平台MySQL的连接方式
注:微信小程序云开发平台指的是腾讯云开发 先给结论:微信小程序云开发平台的MySQL,无法通过获取数据库连接信息的方式进行连接,连接只能通过云开发的SDK连接,具体要参考官方文档: 为什么? 因为…...
MySQL JOIN 表过多的优化思路
当 MySQL 查询涉及大量表 JOIN 时,性能会显著下降。以下是优化思路和简易实现方法: 一、核心优化思路 减少 JOIN 数量 数据冗余:添加必要的冗余字段(如订单表直接存储用户名)合并表:将频繁关联的小表合并成…...
在 Spring Boot 中使用 JSP
jsp? 好多年没用了。重新整一下 还费了点时间,记录一下。 项目结构: pom: <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://ww…...
通过MicroSip配置自己的freeswitch服务器进行调试记录
之前用docker安装的freeswitch的,启动是正常的, 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...
stm32wle5 lpuart DMA数据不接收
配置波特率9600时,需要使用外部低速晶振...
【堆垛策略】设计方法
堆垛策略的设计是积木堆叠系统的核心,直接影响堆叠的稳定性、效率和容错能力。以下是分层次的堆垛策略设计方法,涵盖基础规则、优化算法和容错机制: 1. 基础堆垛规则 (1) 物理稳定性优先 重心原则: 大尺寸/重量积木在下…...
【UE5 C++】通过文件对话框获取选择文件的路径
目录 效果 步骤 源码 效果 步骤 1. 在“xxx.Build.cs”中添加需要使用的模块 ,这里主要使用“DesktopPlatform”模块 2. 添加后闭UE编辑器,右键点击 .uproject 文件,选择 "Generate Visual Studio project files",重…...
JS红宝书笔记 - 3.3 变量
要定义变量,可以使用var操作符,后跟变量名 ES实现变量初始化,因此可以同时定义变量并设置它的值 使用var操作符定义的变量会成为包含它的函数的局部变量。 在函数内定义变量时省略var操作符,可以创建一个全局变量 如果需要定义…...
