How to implement mobile phone verification code in react

React method to implement mobile phone verification code: 1. Download antd button and input components; 2. Pass " "Get the customer's mobile phone number; 3. Obtain the verification code through "await this.props.sendCode({...})".

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to implement mobile phone verification code in react?

React combined with antd realizes the 60-second countdown for obtaining the verification code by mobile phone or email.

I use the antd button and input components here, if you need to download them in advance

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(&#39;defaultLanguage&#39;)
        //得到语言Id
        let langId = lang === &#39;Chinese&#39; ? &#39;zh&#39; : lang === &#39;English&#39; ? &#39;en&#39; : lang === &#39;Japanese&#39; ? &#39;ja&#39; : &#39;&#39;
       //把手机号和语言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: &#39;&#39;,
                email: &#39;&#39;,
                liked: false,
            })
            this.countDown()//调用倒计时
        }
    }

Idea:

When a customer clicks to get the verification code, they need to have the customer’s mobile phone number first, and then pass the phone number into the background to get the verification code. When I do it here, It is judged whether the verification code is sent successfully. After success, a 60-second countdown will be executed. When the countdown reaches 0, liked is set to true, and the content of the button is restored to obtain the verification code

//Rendering

Recommended learning: "react video tutorial"

The above is the detailed content of How to implement mobile phone verification code in react. For more information, please follow other related articles on the PHP Chinese website!