广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >react怎么实现手机验证码
  • 265
分享到

react怎么实现手机验证码

验证码React 2023-05-14 22:05:58 265人浏览 泡泡鱼
摘要

本教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。react怎么实现手机验证码?React结合 antd 实现手机或者邮箱获取验证码60秒倒计时我这边是使用了antd button 和input 组件,若

react怎么实现手机验证码

教程操作环境:windows10系统、React18.0.0版、Dell G3电脑。

react怎么实现手机验证码?

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的内容恢复为 获取验证码

//效果图

f3d85407c311ecbaba3851446d45c91.jpg

以上就是react怎么实现手机验证码的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: react怎么实现手机验证码

本文链接: https://www.lsjlt.com/news/206589.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • react怎么实现手机验证码
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react怎么实现手机验证码?React结合 antd 实现手机或者邮箱获取验证码60秒倒计时我这边是使用了antd button 和input 组件,若...
    99+
    2023-05-14
    验证码 React
  • react如何实现手机验证码
    今天小编给大家分享一下react如何实现手机验证码的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。react实现手机验证码的方...
    99+
    2023-07-04
  • vue怎么实现手机验证码登录
    这篇文章主要介绍“vue怎么实现手机验证码登录”,在日常操作中,相信很多人在vue怎么实现手机验证码登录问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”vue怎么实现手机验证码登录”的疑惑有所帮助!接下来,请跟...
    99+
    2023-06-25
  • redis 手机验证码实现示例
    本文主要介绍了redis 手机验证码实现示例,分享给大家,具体如下: public class PhoneCode { public static void main...
    99+
    2022-11-12
  • java手机验证码如何实现
    要实现Java手机验证码功能,你可以使用短信平台的API来发送短信验证码。以下是一个简单的示例:1. 首先,你需要在短信平台上注册一...
    99+
    2023-09-04
    java
  • vue实现手机验证码登录
    本文实例为大家分享了vue实现手机验证码登录的具体代码,供大家参考,具体内容如下 验证码 <template> <div> <el-ma...
    99+
    2022-11-12
  • php手机验证码实现的方法
    这篇文章主要介绍“php手机验证码实现的方法”,在日常操作中,相信很多人在php手机验证码实现的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”php手机验证码实现的方法”的疑惑有所帮助!接下来,请跟着小编...
    99+
    2023-06-07
  • react怎么实现图片验证
    本教程操作环境:Windows10系统、react18版、Dell G3电脑。react怎么实现图片验证?react实现图片验证码效果如图所示:import React, { Component } from 'react'...
    99+
    2023-05-14
    React
  • Java中怎么实现SMS短信通发送手机验证码
    本篇文章给大家分享的是有关Java中怎么实现SMS短信通发送手机验证码,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。设置短信签名注意不要乱写别的公司等,会被视为诈骗信息设置短信...
    99+
    2023-06-20
  • AngularJs如何实现最新验证手机号码
    这篇文章给大家分享的是有关AngularJs如何实现最新验证手机号码的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。实例如下:感谢各位的阅读!关于“AngularJs如何实现最新验证手机号码”这篇文章就分享到这里了...
    99+
    2022-10-19
  • 微信小程序实现手机号码验证
    本文实例为大家分享了微信小程序实现手机号码验证的具体代码,供大家参考,具体内容如下 wxml <form bindsubmit='formSubmit'>   <v...
    99+
    2022-11-13
  • uniapp手机验证码输入框如何实现
    本篇内容主要讲解“uniapp手机验证码输入框如何实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“uniapp手机验证码输入框如何实现”吧!如键盘被隐藏,可直接点击蓝框弹出键盘,蓝框就相当于i...
    99+
    2023-07-05
  • React-router v6怎么实现登录验证
    这篇文章主要讲解了“React-router v6怎么实现登录验证”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“React-router v6怎么实现登录验证”吧!此示例...
    99+
    2023-06-30
  • javaWeb怎么实现随机图片验证码
    这篇文章给大家分享的是有关javaWeb怎么实现随机图片验证码的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。实现步骤Java后台生成一张随机数字/字母/汉字验证码的图片。存入redis或者session。用户输入...
    99+
    2023-06-14
  • js如何实现手机发送验证码功能
    这篇文章将为大家详细讲解有关js如何实现手机发送验证码功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果图:代码如下:<!DOCTYPE html&g...
    99+
    2022-10-19
  • 微信小程序实现手机验证码登录
    我们的微信小程序里面,手机验证码登录已经成为不可缺少的一部门,为此,我写的这个手机验证码登录,这里我结合thinkphp6+微信小程序实现 首先我们进入小程序页面: wxml页面: ...
    99+
    2022-11-13
  • JS怎么设置手机验证码60s等待
    小编给大家分享一下JS怎么设置手机验证码60s等待,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! html:<d...
    99+
    2022-10-19
  • JS怎么实现验证码
    这篇文章主要介绍JS怎么实现验证码,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体代码:<!DOCTYPE html><html lang="en">...
    99+
    2023-06-27
  • vue+Element怎么实现登录随机验证码
    今天小编给大家分享一下vue+Element怎么实现登录随机验证码的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。验证码验证只...
    99+
    2023-06-29
  • 手机为什么收不到验证码
    手机收不到验证码是网络问题、手机设置问题、手机运营商问题和个人设置问题导致的。详情介绍:1、网络问题,手机所处的网络环境不稳定或者信号弱,就有可能导致验证码无法及时送达;2、手机设置问题,不小心将手机的短信或语音功能关闭,或者将验证码的发送...
    99+
    2023-08-17
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作