React实战之60s倒计时按钮(发送短信验证按钮)
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倒计时按钮(发送短信验证按钮)的更多相关文章
- 使用定时器限制点击按钮发送短信(附源码)--JavaScript小案例
不说多哈,有注释哦,直接贴代码了哈,有疑问请追评呢…… 1.禁用按钮: this.disabled = "disabled"(this指按钮)或: this.disabled = ...
- jQuery实现倒计时重新发送短信验证码功能示例
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 注册登录页面修订-Python使用redis-手机验证接口-发送短信验证
登录页面修订 views.Login.vue <template> <div class="login box"> <img src="@/ ...
- WPF MVVM下做发送短信小按钮
最近做一个项目,因为涉及到注册,因此需要发送短信,一般发送短信都有一个倒计时的小按钮,因此,就做了一个,在此做个记录. 一.发送消息 没有调用公司的短信平台,只是模拟前台生成一串数字,将此串数字输出一 ...
- Flask实战第41天:发送短信验证码
本项目使用的短信运营商是阿里云.使用淘宝账号登录阿里云控制台.在“产品与服务”中搜索“短信”进入短信服务 获取AccessKey 输入子账户用户名 权限选择管理短信服务 签名管理:申请签名 模板管理: ...
- [麦先生]Laravel框架实现发送短信验证
今天在做到用户注册和个人中心的安全管理时,我借助实现第三方短信平台在Laravel框架中进行手机验证的设置; 由于我们做的是一个为客户提供医疗咨询和保健品网站,所以对客户个人隐私的保护显得尤为重要, ...
- PHP使用阿里大鱼发送短信验证
目前,基本上所有的网站注册都要求手机绑定,并通过下发短信验证码方式验证手机的真实性,提高了用户的真实性.但是一般企业单独申请短信行业通道都比较困难,因此选择一家信誉好,稳定性.及时性强的第三方短信通道 ...
- java代码实现调用短信接口,发送短信验证。
一.代码示例 package com.aaa.zxf.login; import org.apache.commons.httpclient.HttpClient; import org.apache ...
- Yii2发送短信验证码完全解决方案
概述 在做项目的时候,需要用到短信发送验证码功能.不能不说Yii2的牛逼,很容易就搞定了.下面我整理一下具体功能和流程,分享给大家. 主要功能 通过Yii2 rules验证手机号 通过js验证是否为手 ...
随机推荐
- wps填充1到1000
A1单元格1 ,选中,填充,序列,确定
- 九度oj 题目1064:反序数
题目1064:反序数 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5163 解决:3698 题目描述: 设N是一个四位数,它的9倍恰好是其反序数(例如:1234的反序数是4321)求N的 ...
- UVA 116_ Unidirectional TSP
题意: 给定整数矩阵,从第一列的任何一个位置出发,每次可以向右.右上.右下走一个格,将最后一行和第一行看成是邻接的,最终到达最后一列,路径长度为所经过格中的整数之和,求最小路径,答案不唯一,输出字典序 ...
- Critical Links-UVa796(无向图求桥)
https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...
- 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 ...
- 咏南 DELPHI DATASNAP LINUX中间件
咏南 DATASNAP LINUX中间件 咏南 DATASNAP LINUX中间件,一套源码,同时支持WINDOWS和LINUX操作系统. 基于DELPHI 10.2 TOKYO开发 使用FIRE ...
- jQuery源代码解析(1)—— jq基础、data缓存系统
闲话 jquery 的源代码已经到了1.12.0版本号.据官网说1版本号和2版本号若无意外将不再更新,3版本号将做一个架构上大的调整.但预计能兼容IE6-8的.或许这已经是最后的样子了. 我学习jq的 ...
- C#中Stack<T>类的使用及部分成员函数的源代码分析
Stack<T>类 Stack<T> 作为数组来实现. Stack<T> 的容量是 Stack<T> 能够包括的元素数. 当向 Stack<T&g ...
- 任务调度(三)——Timer的替代品ScheduledExecutorService简单介绍
先前的两篇博文<任务调度(一)--jdk自带的Timer>和<任务调度(二)--jdk自带的Timer 动态改动任务运行计划>中,简介了一下Timer,能够实现几本的功能.可是 ...
- 【Android】应用安全——反编译
用java开发最操心的就是得到反编译,所以作为开发人员我们须要知道怎么反编译,那样才干知道怎样防止反编译.保证代码安全. 以下来看下比較经常使用的方法! 第一种方式:利用apktool反编译 1,首先 ...