利用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://myzitong.com/article/pcesdd.html