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如何实现手机验证码”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。