react按钮倒计时效果（发送验证码按钮）

1.今天需要做一个用验证码登陆的功能，所以简单把一个按钮的点击效果分享一下，也是参考了一些资料。先看下效果图

Video_2019-07-08_212843.gif

想实现这个按钮的效果还是挺简单的，首先分析下需要做哪些工作。

1.点击按钮之后按钮变成不可点击状态。
2.点击按钮之后出现倒计时。

不可点击状态用disabled属性，倒计时就用setInterval()方法了，好了，接下来看看代码。
首先是需要设置的几个状态

 state = {btnText: '发送验证码',btnBool: false,}

然后是按钮的代码。这里用了两个状态，一个是控制按钮的文字btnText,一个是控制按钮的点击状态btnBool,

<Button type='primary' onClick={this.SendVerCode.bind(this)} disabled={this.state.btnBool}>{this.state.btnText}</Button>

重点来了。

//发送短信验证码SendCode() {this.timer = setInterval(() => {if (maxTime > 0) {--maxTimethis.setState({btnText: '重新获取' + maxTime,btnBool: true})}else {this.setState({btnText: '发送验证码',btnBool: false})}}, 1000)axios.ajax({//这里写后台接口就行了}).then(res => {//调用接口的回调})
}

对了，在此之前还要定义了一个变量，点击按钮之后的倒计时的时间。

let maxTime  = 60

倒计时结束时，按钮会重新变成可以点击状态。希望对你有所参考价值。
Study hard and make progress every day.

react按钮倒计时效果（发送验证码按钮）相关推荐

css 按钮扩散效果,专治按钮效果不明显（扩散动画效果）
效果需求背景由于最近自家小程序用户活跃用户下滑,老板看看自家小程序,发现分享按钮不够明显,于是乎有了下面这段对话. 老板:小明,你过来下,看看这个分享按钮不明显小明:好的,给它点颜色瞧瞧小明 ...
android 按钮顶级效果_Android 中按钮的点击效果
Android 中按钮点击后的效果通常是通过更换图片,或者背景色来实现的. 之前做的一直都是手动写在点击事件里,今天发现了一种更合适的方法,写在xml文件中. 比如,我有两张图片,一张是点击前的bef ...
html按钮突出效果,凸起的按钮效果
凸起的按钮效果来源:中文源码网浏览: 次日期:2018年9月2日 [下载文档: 凸起的按钮效果.txt ] (友情提示:右键点上行txt文档名->目标另存为) 凸起的按钮效果 ...
XX健康:移动端开发-体检预约验证码30秒倒计时短信验证码获取与验证DatePicker日历展示提交预约复杂流程阿里短信工具类
1. 体检预约流程用户可以通过如下操作流程进行体检预约: 在移动端首页点击体检预约,页面跳转到套餐列表页面在套餐列表页面点击要预约的套餐,页面跳转到套餐详情页面在套餐详情页面点击立即预约,页面跳 ...
获取手机验证码按钮的效果实现
在web网页中,用户的一些行为,例如注册,登录,付款,修改密码等,都需要网站通过手机验证码来确认其行为身份,从而保证用户账户和网站自身的安全. 一.简介网页中的验证码一般都是采用点击获取的方式,在实 ...
健康管理系统第七天（移动端_体检预约(手机号校验、发送验证码之后30秒倒计时效果、生成验证码、向手机发送验证码)）
一.体检预约流程用户可以通过如下操作流程进行体检预约: 1.在移动端首页点击体检预约,页面跳转到套餐列表页面 2.在套餐列表页面点击要预约的套餐,页面跳转到套餐详情页面 3.在套餐详情页面点击立即预 ...
简单实现获取短信验证码倒计时效果
我急切地盼望着可以经历一场放纵的快乐,纵使巨大的悲哀将接踵而至,我也在所不惜.--太宰治<人间失格> 一:HTML结构: <div class="input-box1&qu ...
html按钮按下效果_您应该在网站中尝试的8种惊人的HTML按钮悬停效果，让您的网站令人难忘...
HTML按钮悬停效果简介按钮是每个页面,Web应用程序或移动应用程序中经常使用的基本HTML元素. HTML按钮是布局中非常重要的元素,因为在很多情况下,它是用户在呼吁采取行动并说服单击时必须注意到 ...
Unity中使用QQ邮箱发送验证码
1.打开邮箱设置开启POP3/SMTP服务 2.生成授权码 3.发送验证码按钮事件 public void SendVerificationCode() {// 随机生成验证码Verification ...

react按钮倒计时效果（发送验证码按钮）

react按钮倒计时效果（发送验证码按钮）相关推荐

最新文章

热门文章