react Hooks 实现倒计时

需求H5表单提交完毕实现5秒倒计时，网上很多案例，hooks却很少，如果你是vue用户抽出js就可以（这边我使用的ts）

思路：实现倒计时我们就要定时去轮询，那就是setInterval（），在使用定时器我们要在结束后清除定时器clearInterval（），释放内存

我们可以借助hooks 中useEffect的第二参数监听定时的变化，与第三参数return（）=>类似销毁生命周期

useEffect 官网

代码

import {Button,Checkbox,Dialog,Mask,Modal,Radio,Space,TextArea,
} from 'antd-mobile';
import { useEffect, useState } from 'react';
const index = (props: any) => {const [timeLeft, setTimeLeft] = useState<any>();const [visible, setVisible] = useState(true);const [language, setLanguage] = useState('ZH');useEffect(() => {setLanguage(localStorage.getItem('language') ?? 'ZH');}, []);// 倒计数useEffect(() => {console.log(timeLeft);if (timeLeft === 0) {setTimeLeft(null);    // 初始化定时变量setVisible(false);    // 关闭自定义提示框localStorage.clear(); // 清除localStoragehistory.replace('/'); // 跳转登录页}if (!timeLeft) return;const intervalId = setInterval(() => {setTimeLeft(timeLeft - 1);  //切记 hooks 不可以写--或++不支持}, 1000);return () => clearInterval(intervalId); // 清除定时器}, [timeLeft]); // 此处类似vue的watch  timeLeft变量变化就会触发// 提交const onSub = () => {const params = {projectResultId: localStorage.getItem('resultId'),PhoneUniqueId: localStorage.getItem('PhoneUniqueId'),answers: answers,};insertProjectResultAnswer(params).then((res) => { // 接口此处忽略if (res.success) {setTimeLeft(5); // 启动倒计时setVisible(true); // 打开自定义弹框} else {Dialog.alert({content: res.msg,onConfirm: () => {},});}});return (<><divstyle={{position: 'absolute',bottom: '8px',textAlign: 'center',width: '100%',}}><Button className="btnNext" onClick={onSub}>{language == 'ZH' ? '提交' : 'Submit'}</Button></div><Mask visible={visible}><div className="overlayContent"><div><img className="imgSuccess" /></div><div>{language == 'ZH'? `您已全部完成，感谢您的参与。该界面将在${timeLeft}秒后自动关闭。`: `Thank you for your participation. The interface will automatically close after ${timeLeft} seconds.`}</div></div></Mask></>);
export default index;};

css 取自己需要的


// 遮盖层
.overlayContent {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: inline-block;text-align: center;width: 270px;padding: 30px;background: white;border-radius: 16px;
}.imgSuccess {// display: block;width: 142px;height: 119px;//此处图片替换成自己background: url('../../../assets/images/success.png') no-repeat;background-size: 100%;border: 1px dashed gray;margin-bottom: 20px;
}.btnNext {color: white;font-size: 12px;font-weight: bold;background-color: #b18b34;border: none;width: 236px;height: 39px;border-radius: 18px;
}

简单版定时器

请关注，点赞。

react Hooks 实现倒计时相关推荐

都React V18了，还不会正确使用React Hooks吗，万字长文解析Hooks的常见问题
前言今天主要想说一下react hooks,react hooks是react v16.8 之后引入的API,现在react都已经到V18了,hooks怎么还能不会用呢? 首先hooks引入的目的是 ...
react hooks使用_为什么要使用React Hooks？
react hooks使用 The first thing you should do whenever you're about to learn something new is ask your ...
react hooks使用_如何使用React和Hooks检测外部点击
react hooks使用 by Andrei Cacio 通过安德烈·卡西奥(Andrei Cacio) 如何使用React和Hooks检测外部点击 (How to detect an outsid ...
react hooks使用_如何使用Hooks将React类组件转换为功能组件
react hooks使用 by Balaganesh Damodaran 通过Balaganesh Damodaran 如何使用Hooks将React类组件转换为功能组件 (How to conve ...
探React Hooks
前言众所周知,hooks在 React@16.8 中已经正式发布了.而下周周会,我们团队有个同学将会仔细介绍分享一下hooks.最近网上呢有不少hooks的文章,这不免激起了我自己的好奇心,想先行探 ...
使用React Hooks你可能会忽视的作用域问题
前言其实React Hooks已经推出来一段时间了,直到前一阵子才去尝试了下,看到的一些博客都是以API的使用居多,还有一些是对于原理的解析.而我这篇文章想写的是关于React Hooks使用中的作 ...
dw按钮图片滚动js_使用 React Hooks 实现仿石墨的图片预览插件（巨详细）
点击上方"前端教程",选择"星标" 每天前端开发干货第一时间送达! 作者:DARRELL https://juejin.im/post/5e9bf299f265 ...
通过 React Hooks 声明式地使用 setInterval
2019独角兽企业重金招聘Python工程师标准>>> 本文由云+社区发表作者:Dan Abramov 接触 React Hooks 一定时间的你,也许会碰到一个神奇的问题: se ...
mounty不可重新挂载因为先前没有完全卸载_【译】React Hooks测试完全指南
原文地址:https://www.toptal.com/react/testing-react-hooks-tutorial 2018年底,React在16.8版本中引入了Hooks.它们(译注:指R ...

react Hooks 实现倒计时

react Hooks 实现倒计时相关推荐

最新文章

热门文章