大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

利用React-Native怎么实现一个验证码倒计时按钮

利用React-Native怎么实现一个验证码倒计时按钮?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

南昌网站制作公司哪家好,找创新互联公司!从网页设计、网站建设、微信开发、APP开发、自适应网站建设等网站项目制作,到程序开发,运营维护。创新互联公司公司2013年成立到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司

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

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,
          timerTitle: this.props.timerTitle || '获取验证码',
          counting: false,
          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 (
      {
        if (!counting && enable && selfEnable) {
          this.setState({selfEnable:false})
          this.props.onClick(this._shouldStartCountting)
        };
      }}>
        
          {timerTitle}
        
      
    )
  }
}

使用

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

看完上述内容,你们掌握利用React-Native怎么实现一个验证码倒计时按钮的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


名称栏目:利用React-Native怎么实现一个验证码倒计时按钮
分享链接:http://dzwzjz.com/article/pcesdd.html
在线咨询
服务热线
服务热线:028-86922220
TOP