作者：手机用户2502891655 | 来源：互联网 | 2023-09-15 19:45
我这边是使用了antd button 和input 组件，若大家需要 提前下载
import { Input, Button } from ‘antd’
手机号
//这个value是客户手机号，是我在客户信息里面获取到的
获取验证码
className={`apiInput`}
addOnAfter={
//判断如果点击了获取验证码，就让button按钮上显示 *秒后重发送 并且button设置为disabled
disabled={this.props.liked ? false : true}
OnClick={() => this.getCode(theme)}//点击此按钮获取验证码
className={`verificationCode`}>{this.state.liked ? 获取验证码:（60）秒后重发}
} />
//获取验证码
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的内容恢复为 获取验证码
//效果图
京公网安备 11010802041100号