资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

react如何实现手机验证码

今天小编给大家分享一下react如何实现手机验证码的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。

烟台网站建设公司创新互联,烟台网站设计制作,有大型网站制作公司丰富经验。已为烟台上1000家提供企业网站建设服务。企业网站搭建\成都外贸网站建设公司要多少钱,请找那个售后服务好的烟台做网站的公司定做!

react实现手机验证码的方法:1、下载antd button和input组件;2、通过“”获取客户的手机号;3、通过“await this.props.sendCode({...})”实现获取验证码即可。

React结合 antd 实现手机或者邮箱获取验证码60秒倒计时

我这边是使用了antd button 和input 组件,若大家需要 提前下载

import { Input, Button } from ‘antd’
 
       手机号

      //这个value是客户手机号,是我在客户信息里面获取到的         获取验证码

            this.getCode(theme)}//点击此按钮获取验证码                      className={`verificationCode`}>{this.state.liked ? 获取验证码:(60)秒后重发}                    } />          
 //获取验证码 getCode = async theme => {     //我这边是获取了客户信息,从中取到客户的手机号和邮箱,若客户绑定了手机号,就通过手机号验证,若没有绑定手机号,就通过邮箱验证码验证         const { data } = this.props.information.data         //这个是获取当前语言         let lang = getLocalStorage('defaultLanguage')         //得到语言Id         let langId = lang === 'Chinese' ? 'zh' : lang === 'English' ? 'en' : lang === 'Japanese' ? 'ja' : ''        //把手机号和语言id传入后台,获取验证码        const status =  await this.props.sendCode({ mobileOrEmail: data.mobile ? data.mobile : data.email, langId: langId })        //调用下面查看验证码发送的状态方法          this.getSendCodeStatus(status,theme)     }     //倒计时     countDown() {         const { count } = this.state         if (count === 1) {//当为0的时候,liked设置为true,button按钮显示内容为 获取验证码             this.setState({                 count: 60,                 liked: true,             })         } else {             this.setState({                 count: count - 1,                 liked: false,             })             setTimeout(() => this.countDown(), 1000)//每一秒调用一次         }     }     //发送验证码是否成功     getSendCodeStatus = async (status,theme) => {          if (status.success === false) {//若发送失败,提示客户信息发送失败,不进行倒计时             sendCodeError(theme)         } else {             sendCodeSuccess(theme)//若发送成功,liked设为false,意味着发送验证码的按钮将被会禁用             this.setState({                 authCode: '',                 email: '',                 liked: false,             })             this.countDown()//调用倒计时         }     }

思路:

客户点击获取验证码的时候,需要先有客户的手机号,把手机号传入后台,获取验证码,我这边做的时候,是判断了是否发送验证码成功,成功以后才执行60秒倒计时,到倒计时为0的时候,把liked设置为true,button的内容恢复为 获取验证码

//效果图

react如何实现手机验证码

以上就是“react如何实现手机验证码”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。


文章标题:react如何实现手机验证码
文章路径:http://cdkjz.cn/article/ieisgs.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220