利用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怎么实现一个验证码倒计时按钮
分享URL：
http://cdkjz.cn/article/pcesdd.html
