React实现获取验证码倒计时

╰半橙微兮° 2022-03-25 02:39 533阅读 0赞

这里使用了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这个就会调用到子类的那个改变计时的事件

请求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改变事件的 具体网络状态怎么获取实现的还要看你的实现

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

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

![20191014102538799.png][]

[20191014102538799.png]: /images/20220325/5398a4a80fae44da8b5bb15d109c4bb6.png