React实现获取验证码倒计时

这里使用了antd的Button按钮需要npm安装antd

实现

import {Component} from 'react';
import {Button
} from 'antd';class Timer extends Component {constructor(props) {super(props);this.state = {count: 60,liked: true,};}componentDidMount(){this.props.onRef(this)}countDown() {const {count} = this.state;if (count === 1) {this.setState({count: 60,liked: true,});} else {this.setState({count: count - 1,liked: false,});setTimeout(this.countDown.bind(this), 1000);}}handleClick = () => {const {sendMsg} = this.props;const {liked} = this.state;if (!liked) {return;}countDown();};render() {return (<Button onClick={() => this.handleClick()} type="primary">{this.state.liked? '获取验证码': `${this.state.count} 秒后重发`}</Button>)}
}export default Timer;

拆分讲解

下面是完成代码我会做代码细分讲解，也是刚开始学习，有说错的地方请指出，感谢！！！

1、定义状态

constructor(props) {super(props);this.state = {count: 60,liked: true,};}

设置一个状态中倒计时时间和控制按钮的变化状态

2、UI

这实现的是UI的改变，通过定义的liked状态改变显示的文字

() => this.handleClick()这个是定义了一个方法实现点击改变UI触发网络请求、

render() {return (<Button onClick={() => this.handleClick()} type="primary">{this.state.liked? '获取验证码': `${this.state.count} 秒后重发`}</Button>)}

3、点击事件

 handleClick = () => {const {sendMsg} = this.props;const {liked} = this.state;if (!liked) {return;}countDown();};

4、倒计时实现

 countDown() {const {count} = this.state;if (count === 1) {this.setState({count: 60,liked: true,});} else {this.setState({count: count - 1,liked: false,});setTimeout(this.countDown.bind(this), 1000);}}

父组件调用子组件改变事件介绍

导包

实现下面代码关联子组件目的是为了发送成功后可以调用子组件的改变事件

 /*** 这个使用父容器去子容器中取值* @param nextProps*/onRef = (ref) => {this.child = ref};/*** 这个使用父容器去子容器中取值 调用获取短信验证码* @param nextProps*/click = (e) => {this.child.countDown()};

在return中实现下面的这个sendMsg就是定义的网络请求方法在Timer组件的点击事件里面就可以看到接收了父类的sendMsg,这个名字必须一样，onRef这个就会调用到子类的那个改变计时的事件

<Timer onRef={this.onRef} sendMsg={this.sendMsg}/>

请求model网络请求代码

  /*** 发送短信验证码*/sendMsg = (pid) => {const {dispatch, form} = this.props;const phone = form.getFieldValue("username");const phoneRegular = /^1[3456789]\d{9}$/;if (phone) {message.error('请输入手机号码');} else if (phoneRegular.test(phone)) {dispatch({type: 'product/sendPhoneMsg', payload: phone, pid}).then((result) => {if (result) {this.click();}});} else {message.error('请输入有效的手机号码');}};

我使用监听我的网络请求发送成功的状态触发点击子类中Timer的那个UI改变事件的具体网络状态怎么获取实现的还要看你的实现

以上就是有些可能你一下理解不了不会了你就留言我解答吧刚开始学习有问题请指出

关注公众号【码兄】获取更多前端学习资料

React实现获取验证码倒计时相关推荐

vue 获取验证码倒计时组件
之前写过一个计时函数,有计算误差,但是验证码的60秒倒计时可以忽略这一点点误差.直接上代码. <template><div class="captcha-row" ...
Axure9 实现点击获取验证码倒计时功能
此文章帮助大家实现App的点击获取验证码的倒计时功能. 1:创建按钮和全局变量: 拖入一个矩形,创建全局变量Time=60. 在项目里面就可以找到创建全局变量的地方. 2:添加点击事件: (1):添加 ...
VUE定时器，用于登陆获取验证码倒计时
第一步在当前的按钮中添加@click 事件,并在按钮内文字后面加上变量,并用v-if进行判断,看秒数是否大于0 并且添加disabled,当second>0的时候给它disabled掉. 第二 ...
jQuery 点击获取验证码,倒计时30秒
//HTML: <div class="layui-form-item"> <input class="layui-yanzheng" ...
js 获取验证码倒计时
1 html 部分 <text :disabled="disabled" @click="getCode">{{ btntext }}</te ...
Flutter获取验证码倒计时按钮
在Flutter中,有一个定时器类Timer,使用方法: Timer timer = new Timer(new Duration(milliseconds: 60), (){//倒计时结束执行}); ...
android 获取验证码倒计时
在开发时,登陆注册时必有的模块,下面是记录一下注册时获取验证码的方法:效果图如下: 获取验证码后,进入倒计时并且是不可点击的状态. 1.复制下面工具类到项目中 import android.graph ...
微信小程序获取验证码倒计时
实现效果图使用方法: setInterval demo:(如果对 setInterval不了解的可以先百度下) xml 中写一个按钮: <view class="container& ...
js获取验证码倒计时60s(超简单)
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
获取验证码倒计时60秒
<template><view class="content"><view class="inps"><input c ...