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

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

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 (
      <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},textstyle,{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

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