React-Native中使用验证码倒计时的按钮实例代码

概述开发过程中有获取手机验证码的场景，这时候有这样的要求：1，点击“获取验证码”的按钮，发起获取验证码的网络请求，同时按钮置为不可用

开发过程中有获取手机验证码的场景，这时候有这样的要求：

1，点击“获取验证码”的按钮，发起获取验证码的网络请求，同时按钮置为不可用

2，如果网络请求成功，按钮继续不可用，但按钮上文本改为倒计时((*s)后重新获取)

3，如果网络请求失败，按钮置为可用

4，倒计时结束，按钮可用

直接上代码

源码

import React,{PropTypes} from 'react';import {VIEw,Text,touchableOpacity} from 'react-native';export default class Timerbutton extends React.Component {  constructor(props) {   super(props)    this.state = {      timerCount: this.props.timerCount || 90,timerTitle: this.props.timerTitle || '获取验证码',counting: false,selfEnable: true,};    this._shouldStartCountting = this._shouldStartCountting.bind(this)    this._countDownAction = this._countDownAction.bind(this)  }  static propTypes = {   style: PropTypes.object,textStyle: Text.propTypes.style,onClick: PropTypes.func,disablecolor: PropTypes.string,timerTitle: PropTypes.string,enable: React.PropTypes.oneOfType([React.PropTypes.bool,React.PropTypes.number])  };  _countDownAction(){    const codeTime = this.state.timerCount;    this.interval = setInterval(() =>{      const timer = this.state.timerCount - 1      if(timer===0){        this.interval&&clearInterval(this.interval);        this.setState({          timerCount: codeTime,selfEnable: true        })      }else{        console.log("---- timer ",timer);        this.setState({          timerCount:timer,timerTitle: `重新获取(${timer}s)`,})      }    },1000)  }  _shouldStartCountting(shouldStart){    if (this.state.counting) {return}    if (shouldStart) {      this._countDownAction()      this.setState({counting: true,selfEnable:false})    }else{      this.setState({selfEnable:true})    }  }  componentwillUnmount(){    clearInterval(this.interval)  }  render(){    const {onClick,style,textStyle,enable,disablecolor} = this.props    const {counting,timerTitle,selfEnable} = this.state    return (      <touchableOpacity activeOpacity={counting ? 1 : 0.8} onPress={()=>{        if (!counting && enable && selfEnable) {          this.setState({selfEnable:false})          this.props.onClick(this._shouldStartCountting)        };      }}>        <VIEw style={[{wIDth:100,height:44,flex:1,justifyContent:'center',alignItems:'center'},style]}>          <Text style={[{FontSize: 16},{color: ((!counting && enable && selfEnable) ? textStyle.color : disablecolor || 'gray')}]}>{timerTitle}</Text>        </VIEw>      </touchableOpacity>    )  }}

使用

<Timerbutton enable={phoneNumber.length}  style={{wIDth: 110,marginRight: 10}}  textStyle={{color: Staticcolor.color_MAIN}}  timerCount={10}  onClick={(shouldStartCountting)=>{    this._requestSMSCode(shouldStartCountting)  }}/>

onClick：触发后按钮selfEnable会立即被置为false 通过onClick中的一系列逻辑处理之后需要调用回调函数结束倒计时 shouldStartCountting：回调函数，接受一个Bool类型的参数 shouldStartCountting(true)，开始倒计时，倒计时结束时自动恢复初始状态 shouldStartCountting(false)， 按钮的selfEnable会立即被置为true

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的React-Native中使用验证码倒计时的按钮实例代码全部内容，希望文章能够帮你解决React-Native中使用验证码倒计时的按钮实例代码所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。