|
这篇文章主要介绍了React注册倒计时功能的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
一、React版本
16.4.1
二、具体代码如下
设置state属性
constructor(props){
super(props);
this.state = {
btnText:'获取验证码',
seconds: 60, //称数初始化
liked: true //获取验证码文案
}
}
2.倒计时
// 获取验证码
sendCode = () => {
let siv = setInterval(() => {
this.setState({
liked:false,
seconds:this.state.seconds - 1,
},() => {
if(this.state.seconds == 0){
clearInterval(siv);
this.setState({
liked:true,
secounds:60
})
}
});
},1000);
}
3.jsx代码
<FormItem
{...formItemLayout}
label="验证码"
>
<Row gutter={8}>
<Col span={6}>
{getFieldDecorator('captcha', {
rules: [{ required: true, message: '请输入短信验证码!' }],
})(
<Input />
)}
</Col>
<Col span={12}>
<Button onClick={this.sendCode} disabled={!this.state.liked}>
{
this.state.liked
?
<span>{this.state.btnText}</span>
:
<span>{this.state.seconds + ' s 后重新发送'}</span>
}
</Button>
</Col>
</Row>
</FormItem>
明明很简单的，但是看网上有的代码搞得很复杂一样，当然也可以用react相关插件，不过我觉得这样更简洁。
ps：react 获取服务器端时间倒计时
import React, { Component } from 'react'
import axios from 'axios'
export default class Timer extends Component {
constructor(props) {
super(props)
this.state = {
bool: false,
days: '0',
hours: '00',
minutes: '00',
seconds: '00'
}
}
componentDidMount() {
this.start()
}
async start() {
this.timer && clearTimeout(this.timer) // 先清除一遍定时器，避免被调用多次
// 发起任意一个服务器请求， 然后从headers 里获取服务器时间
let leftTime = await axios.get('/').then(response => {
return new Date(this.props.date).getTime() - new Date(response.headers.date).getTime() // 服务器与倒计时的 时间差
}).catch(error => {
console.log(error)
return 0 // 这里发送的服务器请求失败 设为0
})
// 倒计时
this.timer = setInterval(() => {
leftTime = leftTime - 1000
let { bool, days = '0', hours = '00', minutes = '00', seconds = '00' } = this.countdown(leftTime)
if (bool) { // 结束倒计时
clearTimeout(this.timer)
}
this.setState({
bool,
days,
hours,
minutes,
seconds
})
}, 1000)
}
/**
* 倒计时
* @param leftTime 要倒计时的时间戳
*/
countdown(leftTime) {
let bool = false
if (leftTime <= 0) {
bool = true
return { bool }
}
var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10) //计算剩余的天数
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10)
if (hours < 10) {
hours = '0' + hours
}
var minutes = parseInt(leftTime / 1000 / 60 % 60, 10)
if (minutes < 10) {
minutes = '0' + minutes
}
var seconds = parseInt(leftTime / 1000 % 60, 10)
if (seconds < 10) {
seconds = '0' + seconds
}
return { bool, days, hours, minutes, seconds }
}
componentWillUnmount() {
clearTimeout(this.timer)
}
render() {
let { bool, days, hours, minutes, seconds } = this.state
return (
<div>
{
bool ?
<div>活动已结束</div> :
<div>
{days} 天 {hours} : {minutes} : {seconds}
</div>
}
</div>
)
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。 | 
发表于 2018-9-6 14:44:20
