import React from 'react';
import { Button } from 'antd';
 
class A extends React.PureComponent {
 
    constructor(props){
        super(props)
        this.state = {
           count: 0, // 初始值0
        }
    }
    clickCountTime = () => {
        this.setState({
            count: 5, // 設(shè)置一個5秒倒計時 
        })
        let timer = null;
        timer = setInterval(() => {
            this.setState({
                count: this.state.count - 1, // 倒計時減1秒 
            }, () => {
                if(this.state.count < 1) {
                    clearInterval(timer); // 清除定時器
                }
            })
        }, 1000)
    }
    
    render () {
        const { count } = this.state;
        return (
            <Button 
                type='primary'
                style={{ width:'85px' }}
                disabled={!!count} // 倒計時期間不可編輯，如果count=0，0是false，!0=true, !!0=false
                onClick={this.clickCountTime}
            >
                {count === 0 ? '獲取驗證碼' : `${count}秒后重試`}
            </Button>
        )
    }
 
}
 
export default A

import React, { useState, useEffect, useCallback, useRef } from 'react';
 
const CountDown () {
  
  const intervalRef = useRef(null); // 使用useRef來存儲計數(shù)器的值，并在setInterval函數(shù)中訪問它
  
  const [count, setCount] = useState(0); // 初始值count=0
  
  // 組件卸載時清除計時器：設(shè)置清除定時器,避免count還未為0時，組件已被Unmount
  useEffect(() => {
    return () => {
      clearInterval(intervalRef.current);
    };
  }, []);
 
    // 監(jiān)聽count的變化 
  useEffect(() => {
    if (count === 59) {
      intervalRef.current = setInterval(() => {
        setCount((preCount) => preCount - 1);
      }, 1000);
    } else if (count === 0) {
      clearInterval(intervalRef.current);
    }
  }, [count]);
 
    // 點擊事件
  const onGetCaptcha = useCallback(() => {
    setCount(59); // 從59秒開始倒計時
  }, []);
 
  return (
    <Button type='button' disabled={!!count} onClick={onGetCaptcha}>
        {count ? `${count} s` : '獲取驗證碼'}
    </Button>
  );
};
 
export default CountDown;

import { Row, Col, Input, Button } from "antd"
import { useState, useRef, useEffect } from "react"
 
const InputGroup = Input.Group;
 
const App = () => {
 
  const [phone, setPhone] = useState(null); // 定義初始手機號
  const [count, setCount] = useState(0) // 默認0秒
  const timerRef = useRef(null) // 使用useRef設(shè)置一個倒計時器，這樣我就可以防止重新渲染
 
   // 監(jiān)聽count的變化 
  useEffect(() => {
    if (count === 59) {
      intervalRef.current = setInterval(() => {
        setCount((preCount) => preCount - 1);
      }, 1000);
    } else if (count === 0) {
      clearInterval(intervalRef.current);
    }
  }, [count]); // count改變就會執(zhí)行
 
 
    // 獲取驗證碼
    const getInfo = () => {
        const reg= /^1[3456789]\d{9}$/;
        if(phone !== null || phone !== underfine) {
            if(!reg.test(phone )) { // 若手機號不符合要求，倒計時不進行
                setCount(0);
                message.error('輸入的手機號不正確!')
                return false;
            } else {
                // 調(diào)接口，傳給后臺，獲取后臺的status狀態(tài)
                axios.post('', { phone }).then(res => {
                    if(status.success === false) {
                        setCount(0);
                        message.error('發(fā)送失敗!')
                    } else {
                        message.success ('發(fā)送成功!')
                        setCount(59);
                    }
                })
            }
        }
 
 
    // 獲取手機號輸入框里的值    
    const getValue = (e) => {
        setPhone(e.target.value);
    }
 
 
  return (
    <div>
       <p>手機號</p>
        <Row>
         <Col span={8}>
            <Input placeholder='請輸入手機號' onBlur={e => getValue(e)} allowClear />
         </Cow>
       </Row>
       <p>短信驗證碼</p>
       <Row>
         <Col span={8}>
            <InputGroup compact>
                <Input placeholder='請輸入驗證碼' style={{ width: '40%'}} allowClear />
                <Button onClick={getInfo} disabled={!!count}>{count === 0 ? '獲取驗證碼': `${count}秒后重發(fā)`}</Button>
            </InputGroup>
         </Cow>
       </Row>
   </div>
  )
}
 
export default App