Cara melaksanakan kod pengesahan telefon mudah alih secara bereaksi

Cara melaksanakan kod pengesahan telefon mudah alih dalam tindak balas: 1. Muat turun butang antd dan komponen input 2. Lulus " "Dapatkan nombor telefon mudah alih pelanggan; 3. Dapatkan kod pengesahan melalui "await this.props.sendCode({...})".

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 18.0.0, komputer Dell G3.

Bagaimana untuk melaksanakan kod pengesahan telefon mudah alih dalam reaksi?

React bergabung dengan antd untuk melaksanakan kira detik 60 saat untuk mendapatkan kod pengesahan melalui telefon mudah alih atau e-mel

Saya menggunakan butang antd dan komponen input di sini, jika anda perlu memuat turun mereka terlebih dahulu

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:

Apabila pelanggan mengklik untuk mendapatkan kod pengesahan, mereka perlu mempunyai nombor telefon mudah alih pelanggan dahulu, dan kemudian lulus nombor telefon ke latar belakang untuk mendapatkan kod pengesahan Saya melakukannya di sini Pada masa ini, ia dinilai sama ada kod pengesahan berjaya dihantar ditetapkan kepada benar, dan kandungan butang dipulihkan kepada Dapatkan Kod Pengesahan

//Rendering

Pembelajaran yang disyorkan: "tutorial video reaksi "

Atas ialah kandungan terperinci Cara melaksanakan kod pengesahan telefon mudah alih secara bereaksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!