React实战之60s倒计时按钮——短信验证按钮

导入:(antd组件——Form表单

 import { Button, Form, Input } from 'antd';
const FormItem = Form.Item; state = {
  loading: false,
  yztime: ,
}; //倒计60s
count = () => {
  let { yztime } = this.state;
  let siv = setInterval(() => {
    this.setState({ yztime: (yztime--) }, () => {
      if (yztime <= -) {
        clearInterval(siv);  //倒计时( setInterval() 函数会每秒执行一次函数),用 clearInterval() 来停止执行:
        this.setState({ loading: false, yztime: })
      }
    });
  }, );
} //短信验证
verifiedSubmit = (e) => {
  this.setState({ loading: true });
  e.preventDefault();
  this.props.form.validateFields((err, values) => {
    if (!this.state.yztime == ) {
      this.count();
    }
    let verify = { phone: values.accountname, gettype: }
    this.props.dispatch({ type: '***/***', payload: { verify } });
  });
} render() {
  const { form: { getFieldDecorator } } = this.props;
  return (
    <Form>
      <FormItem>
        {getFieldDecorator('yzm', {
          rules: [{ required: false, message: '请输入验证码!' }],
        })(<Input placeholder="请输入验证码" />
        )}
        <Button loading={this.state.loading} htmlType="submit" onClick={this.verifiedSubmit}>
        {this.state.loading ? this.state.yztime + '秒' : '发送验证'}
        </Button>
      </FormItem>
    </Form>
  );
}
 
代码就这样了!
 
小生的第一篇博客,如有不足之处,还望多多指教

React实战之60s倒计时按钮(发送短信验证按钮)的更多相关文章

  1. 使用定时器限制点击按钮发送短信(附源码)--JavaScript小案例

    不说多哈,有注释哦,直接贴代码了哈,有疑问请追评呢…… 1.禁用按钮: this.disabled = "disabled"(this指按钮)或: this.disabled = ...

  2. jQuery实现倒计时重新发送短信验证码功能示例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  3. 注册登录页面修订-Python使用redis-手机验证接口-发送短信验证

    登录页面修订 views.Login.vue <template> <div class="login box"> <img src="@/ ...

  4. WPF MVVM下做发送短信小按钮

    最近做一个项目,因为涉及到注册,因此需要发送短信,一般发送短信都有一个倒计时的小按钮,因此,就做了一个,在此做个记录. 一.发送消息 没有调用公司的短信平台,只是模拟前台生成一串数字,将此串数字输出一 ...

  5. Flask实战第41天:发送短信验证码

    本项目使用的短信运营商是阿里云.使用淘宝账号登录阿里云控制台.在“产品与服务”中搜索“短信”进入短信服务 获取AccessKey 输入子账户用户名 权限选择管理短信服务 签名管理:申请签名 模板管理: ...

  6. [麦先生]Laravel框架实现发送短信验证

    今天在做到用户注册和个人中心的安全管理时,我借助实现第三方短信平台在Laravel框架中进行手机验证的设置;  由于我们做的是一个为客户提供医疗咨询和保健品网站,所以对客户个人隐私的保护显得尤为重要, ...

  7. PHP使用阿里大鱼发送短信验证

    目前,基本上所有的网站注册都要求手机绑定,并通过下发短信验证码方式验证手机的真实性,提高了用户的真实性.但是一般企业单独申请短信行业通道都比较困难,因此选择一家信誉好,稳定性.及时性强的第三方短信通道 ...

  8. java代码实现调用短信接口,发送短信验证。

    一.代码示例 package com.aaa.zxf.login; import org.apache.commons.httpclient.HttpClient; import org.apache ...

  9. Yii2发送短信验证码完全解决方案

    概述 在做项目的时候,需要用到短信发送验证码功能.不能不说Yii2的牛逼,很容易就搞定了.下面我整理一下具体功能和流程,分享给大家. 主要功能 通过Yii2 rules验证手机号 通过js验证是否为手 ...

随机推荐

  1. wps填充1到1000

    A1单元格1 ,选中,填充,序列,确定

  2. 九度oj 题目1064:反序数

    题目1064:反序数 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5163 解决:3698 题目描述: 设N是一个四位数,它的9倍恰好是其反序数(例如:1234的反序数是4321)求N的 ...

  3. UVA 116_ Unidirectional TSP

    题意: 给定整数矩阵,从第一列的任何一个位置出发,每次可以向右.右上.右下走一个格,将最后一行和第一行看成是邻接的,最终到达最后一列,路径长度为所经过格中的整数之和,求最小路径,答案不唯一,输出字典序 ...

  4. Critical Links-UVa796(无向图求桥)

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  5. Ubuntu 16.04出现Can't open /etc/rc.d/init.d/functions的问题解决

    /etc/rc.d/init.d/functions是CentOS的位置,Ubuntu对应:/lib/lsb/init-functions 参考: https://unix.stackexchange ...

  6. 咏南 DELPHI DATASNAP LINUX中间件

    咏南 DATASNAP LINUX中间件   咏南 DATASNAP LINUX中间件,一套源码,同时支持WINDOWS和LINUX操作系统. 基于DELPHI 10.2 TOKYO开发 使用FIRE ...

  7. jQuery源代码解析(1)—— jq基础、data缓存系统

    闲话 jquery 的源代码已经到了1.12.0版本号.据官网说1版本号和2版本号若无意外将不再更新,3版本号将做一个架构上大的调整.但预计能兼容IE6-8的.或许这已经是最后的样子了. 我学习jq的 ...

  8. C#中Stack&lt;T&gt;类的使用及部分成员函数的源代码分析

    Stack<T>类 Stack<T> 作为数组来实现. Stack<T> 的容量是 Stack<T> 能够包括的元素数. 当向 Stack<T&g ...

  9. 任务调度(三)——Timer的替代品ScheduledExecutorService简单介绍

    先前的两篇博文<任务调度(一)--jdk自带的Timer>和<任务调度(二)--jdk自带的Timer 动态改动任务运行计划>中,简介了一下Timer,能够实现几本的功能.可是 ...

  10. 【Android】应用安全——反编译

    用java开发最操心的就是得到反编译,所以作为开发人员我们须要知道怎么反编译,那样才干知道怎样防止反编译.保证代码安全. 以下来看下比較经常使用的方法! 第一种方式:利用apktool反编译 1,首先 ...