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实现获取验证码倒计时_react获取短信验证码