• 技术文章 >web前端 >前端问答

    react怎么实现手机验证码

    藏色散人藏色散人2023-01-04 10:18:06原创150

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

    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。

    react怎么实现手机验证码?

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

    //效果图

    f3d85407c311ecbaba3851446d45c91.jpg

    推荐学习:《react视频教程

    以上就是react怎么实现手机验证码的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:验证码 React
    上一篇:react路由返回时不刷新怎么办 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react安装yarn一直报不是内部命令怎么办• react项目安装失败怎么办• react项目怎么改标题• react路由返回时不刷新怎么办
    1/1

    PHP中文网