利用React-Native怎么实现一个验证码倒计时按钮?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。开发过程中有获取手机验证码的场景,这时候有这样的要求:1,点击“获取验证码
利用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> ) }}
--结束END--
本文标题: 利用React-Native怎么实现一个验证码倒计时按钮
本文链接: https://www.lsjlt.com/news/223853.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
2024-05-03
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0