반응으로 휴대폰 인증 코드를 구현하는 방법

반응에서 휴대폰 인증 코드를 구현하는 방법: 1. antd 버튼 및 입력 구성 요소를 다운로드합니다. 2. "" 휴대폰 번호; 3. "await this.props.sendCode({...})"를 통해 인증번호를 받습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 18.0.0, Dell G3 컴퓨터.

반응에서 휴대폰 인증 코드를 구현하는 방법은 무엇입니까?

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. 시간에 도달하고 like가 true로 설정되며 버튼 내용이 인증코드 받기

//Rendering

로 복원됩니다. : "반응 영상 튜토리얼"

위 내용은 반응으로 휴대폰 인증 코드를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!