手机身份验证码 react如何实现?

发布时间：2023-07-06 11:00:23 所属栏目：教程来源：未知

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

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

　　react实现手机验证码的方法：1、下载antd button和input组件；2、通过“<Input className={`apiMobileInput`} disabled value={this.props.phoneNumber} />”获取客户的手机号；3、通过“await this.props.sendCode({...})”实现获取验证码即可。

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

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

　　import { Input, Button } from ‘antd’

　　 <div>

　　       <p className={`littleTitle`}>手机号</p>

　　      <Input className={`apiMobileInput`} disabled value={this.props.phoneNumber} />//这个value是客户手机号，是我在客户信息里面获取到的

　　        <p className={`littleTitle`}>获取验证码</p>

　　           <Input

　　              className={`apiInput`}

　　               addonAfter={

　　                  <button

　　                    //判断如果点击了获取验证码，就让button按钮上显示 *秒后重发送并且button设置为disabled

　　                    disabled={this.props.liked ? false : true}

　　                    onClick={() => this.getCode(theme)}//点击此按钮获取验证码

　　                     className={`verificationCode`}>{this.state.liked ? 获取验证码:（60）秒后重发}

　　                   </button>} />

　　         </div>

　　 //获取验证码

　　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的内容恢复为获取验证码

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!