react倒计时功能

目录

类组件写法

函数组件写法：

demo: 手机获取验证码登录（验证码60秒倒计时）

react倒计时5 秒

React中的倒计时可以通过使用setInterval()函数来实现。下面是一个示例代码：

类组件写法

import React from 'react';import { Button } from 'antd';class A extends React.PureComponent {constructor(props){super(props)this.state = { count: 0, // 初始值0}}clickCountTime = () => {this.setState({count: 5, // 设置一个5秒倒计时 })let timer = null;timer = setInterval(() => {this.setState({count: this.state.count - 1, // 倒计时减1秒 }, () => {if(this.state.count < 1) {clearInterval(timer); // 清除定时器}})}, 1000)}render () {const { count } = this.state;return (<Button type='primary'style={{ width:'85px' }}disabled={!!count} // 倒计时期间不可编辑，如果count=0，0是false，!0=true, !!0=falseonClick={this.clickCountTime}>{count === 0 ? '获取验证码' : `${count}秒后重试`})}}export default A

react倒计时60 秒

React中的倒计时可以通过使用setInterval()函数来实现。下面是一个示例代码：

函数组件写法：

设置一个button按钮给点击事件，按下后状态变为disabled，开始定时器每秒减一，当时间为0时，清除定时器，重置会原来的状态。

import React, { useState, useEffect, useCallback, useRef } from 'react';const CountDown () {const intervalRef = useRef(null); // 使用useRef来存储计数器的值，并在setInterval函数中访问它const [count, setCount] = useState(0); // 初始值count=0// 组件卸载时清除计时器：设置清除定时器,避免count还未为0时，组件已被UnmountuseEffect(() => {return () => {clearInterval(intervalRef.current);};}, []);// 监听count的变化 useEffect(() => {if (count === 59) {intervalRef.current = setInterval(() => {setCount((preCount) => preCount - 1);}, 1000);} else if (count === 0) {clearInterval(intervalRef.current);}}, [count]);// 点击事件const onGetCaptcha = useCallback(() => {setCount(59); // 从59秒开始倒计时}, []);return ({count ? `${count} s` : '获取验证码'});};export default CountDown;

demo: 手机获取验证码登录（验证码60秒倒计时）

import { Row, Col, Input, Button } from "antd"import { useState, useRef, useEffect } from "react"const InputGroup = Input.Group;const App = () => {const [phone, setPhone] = useState(null); // 定义初始手机号const [count, setCount] = useState(0) // 默认0秒const timerRef = useRef(null) // 使用useRef设置一个倒计时器，这样我就可以防止重新渲染 // 监听count的变化 useEffect(() => {if (count === 59) {intervalRef.current = setInterval(() => {setCount((preCount) => preCount - 1);}, 1000);} else if (count === 0) {clearInterval(intervalRef.current);}}, [count]); // count改变就会执行// 获取验证码const getInfo = () => {const reg= /^1[3456789]\d{9}$/;if(phone !== null || phone !== underfine) {if(!reg.test(phone )) { // 若手机号不符合要求，倒计时不进行setCount(0);message.error('输入的手机号不正确!')return false;} else {// 调接口，传给后台，获取后台的status状态axios.post('', { phone }).then(res => {if(status.success === false) {setCount(0);message.error('发送失败!')} else {message.success ('发送成功!')setCount(59);}})}}// 获取手机号输入框里的值const getValue = (e) => {setPhone(e.target.value);}return ( 
手机号
  getValue(e)} allowClear />   
短信验证码
  <Input placeholder='请输入验证码' style={{ width: '40%'}} allowClear />{count === 0 ? '获取验证码': `${count}秒后重发`}   )}export default App