全面的聊城网站建设,网站发布之后上传文件路径变了,seo长尾关键词优化,品牌广告投放背景
在开发过程中#xff0c;经常需要使用到倒计时的场景#xff0c;当用户点击后#xff0c;按钮进行倒计时#xff0c;然后等待邮件或者短信发送#xff0c;每次都写重复代码#xff0c;会让代码显得臃肿#xff0c;所以封装一个组件来减少耦合
创建一个倒计时组件…背景
在开发过程中经常需要使用到倒计时的场景当用户点击后按钮进行倒计时然后等待邮件或者短信发送每次都写重复代码会让代码显得臃肿所以封装一个组件来减少耦合
创建一个倒计时组件 编辑基本框架
设计3个参数一个是倒计时时长一个是开始时执行的方法一个是展示文本
import React, { useState, useEffect, useRef } from react;
import { Button } from antd;// 定义 CountdownButton 的属性接口
interface CountdownButtonProps extends OmitReact.ButtonHTMLAttributesHTMLButtonElement, onClick {countdownTime?: number;text?: string;onStart?: () void;
}const CountdownButton: React.FCCountdownButtonProps ({ countdownTime 60, text 获取验证码, onStart, ...restProps }) {const [isDisabled, setIsDisabled] useState(false);const [buttonText, setButtonText] useState(text);// 使用useRef来保存倒计时的当前值避免状态重置const countdownRef useRef(countdownTime);const intervalRef useRefnumber | 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 OmitReact.ButtonHTMLAttributesHTMLButtonElement, onClick {countdownTime?: number;text?: string;onStart?: () void;
}const CountdownButton: React.FCCountdownButtonProps ({ countdownTime 60, text 获取验证码, onStart, ...restProps }) {const [isDisabled, setIsDisabled] useState(false);const [buttonText, setButtonText] useState(text);// 使用useRef来保存倒计时的当前值避免状态重置const countdownRef useRef(countdownTime);const intervalRef useRefnumber | 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} typeprimary /效果
