"; 3. , obtenez simplement le code de vérification via "wait this.props.sendCode({...})"."/> "; 3. , obtenez simplement le code de vérification via "wait this.props.sendCode({...})".">
Maison > Article > interface Web > Comment implémenter le code de vérification du téléphone mobile en réaction
Comment implémenter le code de vérification du téléphone mobile dans React : 1. Téléchargez le bouton antd et saisissez les composants ; 2. Obtenez le mot de passe du client via "" Numéro de téléphone portable ; 3. Obtenez le code de vérification via "await this.props.sendCode({...})".
L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.
Comment implémenter le code de vérification du téléphone mobile dans React ?
React se combine avec antd pour mettre en œuvre un compte à rebours de 60 secondes pour obtenir le code de vérification par téléphone mobile ou par e-mail
J'utilise le bouton antd et les composants de saisie ici Si vous devez les télécharger à l'avance
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()//调用倒计时 } }
Idée :
Les clients cliquent pour obtenir le code de vérification Parfois, vous devez d'abord avoir le numéro de téléphone portable du client, transmettre le numéro de téléphone portable en arrière-plan et obtenir le code de vérification. Lorsque je le fais ici, je juge si le code de vérification. est envoyé avec succès. Après le succès, un compte à rebours de 60 secondes est exécuté lorsque le compte à rebours atteint 0. Lorsque, définissez J'aime sur vrai, et le contenu du bouton est restauré pour obtenir le code de vérification
//Rendu
Recommandé. apprentissage : "tutoriel vidéo React"
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!