react如何實現手機驗證碼

今天小編給大家分享一下react如何實現手機驗證碼的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

react實現手機驗證碼的方法：1、下載antd button和input組件；2、通過“<Input className={`apiMobileInput`} disabled value={this.props.phoneNumber} />”獲取客戶的手機號；3、通過“await this.props.sendCode({...})”實現獲取驗證碼即可。

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的內容恢復為 獲取驗證碼

//效果圖

以上就是“react如何實現手機驗證碼”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注億速云行業資訊頻道。