Reactで携帯電話認証コードを実装する方法

携帯電話認証コードを実装するための React メソッド: 1. antd ボタンと入力コンポーネントをダウンロードします; 2. "

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

React で携帯電話認証コードを実装するにはどうすればよいですか?

React と antd を組み合わせることで、携帯電話またはメールで確認コードを取得するまでの 60 秒のカウントダウンが実現します。

ここでは、必要に応じて antd ボタンと入力コンポーネントを使用します。事前にダウンロードしてください

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()//调用倒计时
        }
    }

アイデア:

顧客がクリックして確認コードを取得するときは、まず顧客の携帯電話番号を取得し、次に顧客の携帯電話番号を渡す必要があります。電話番号をバックグラウンドで入力して認証コードを取得します。ここで認証コードの送信が成功したかどうかを判定します。成功後、60秒のカウントダウンが実行されます。カウントダウンが0になると、いいね！が設定されます。 true の場合、ボタンのコンテンツは検証コードを取得するために復元されます。

//レンダリング

推奨学習: 「react ビデオ チュートリアル#」 ##"

以上がReactで携帯電話認証コードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。