1. React version
16.4.1
2. The specific code is as follows
Set state properties
constructor(props){ super(props); = { btnText:'Get verification code', seconds: 60, //Initialization of the number liked: true //Get verification code document } }
2. Countdown
// Get the verification code sendCode = () => { let siv = setInterval(() => { ({ liked:false, seconds: - 1, },() => { if( == 0){ clearInterval(siv); ({ liked:true, secounds:60 }) } }); },1000); }
Code
<FormItem {...formItemLayout} label="Verification Code" > <Row gutter={8}> <Col span={6}> {getFieldDecorator('captcha', { rules: [{ required: true, message: 'Please enter the SMS verification code!' }], })( <Input /> )} </Col> <Col span={12}> <Button onClick={} disabled={!}> { ? <span>{}</span> : <span>{ + ' s resend'}</span> } </Button> </Col> </Row> </FormItem>
It's obviously very simple, but it looks like some codes on the Internet are very complicated. Of course, you can also use react-related plug-ins, but I think this is more concise.
ps: react to get the server-side time countdown
import React, { Component } from 'react' import axios from 'axios' export default class Timer extends Component { constructor(props) { super(props) = { bool: false, days: '0', hours: '00', minutes: '00', seconds: '00' } } componentDidMount() { () } async start() { && clearTimeout() // Clear the timer first to avoid being called multiple times // Initiate any server request and then get server time from headers let leftTime = await ('/').then(response => { return new Date().getTime() - new Date().getTime() // Time difference between server and countdown }).catch(error => { (error) return 0 // The server request sent here failed. Set to 0 }) // Countdown = setInterval(() => { leftTime = leftTime - 1000 let { bool, days = '0', hours = '00', minutes = '00', seconds = '00' } = (leftTime) if (bool) { // End countdown clearTimeout() } ({ bool, days, hours, minutes, seconds }) }, 1000) } /** * Countdown * @param leftTime Timestamp to count down */ countdown(leftTime) { let bool = false if (leftTime <= 0) { bool = true return { bool } } var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10) //Calculate the remaining days 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() } render() { let { bool, days, hours, minutes, seconds } = return ( <div> { bool ? <div>The event has ended</div> : <div> {days} sky {hours} : {minutes} : {seconds} </div> } </div> ) } }
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.