react实现手机验证码的方法：1、下载antd button和input组件；2、通过“40e45e81a53ee4e50733648b5df554dc”获取客户的手机号；3、通过“await this.props.sendcode({...})”实现获取验证码即可。
本教程操作环境：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的内容恢复为 获取验证码
//效果图
推荐学习：《react视频教程》
以上就是react怎么实现手机验证码的详细内容。