react写的模拟发送验证码效果

// eslint-disable-next-line no-use-before-define
import React, { useState, useRef } from 'react'
import ReactDOM from 'react-dom'
export default function CountDown () {
  // 定义count状态
  const [count, setCount] = useState(10)
  // 定义显示与隐藏的状态
  const [isShow, setShow] = useState(false)
  // const timeID = null
  // console.log(timeID)
  // timeRef的定时器名字
  const TimeRef = useRef()
  console.log(count, setCount)
  console.log(useRef)
  const hClick = () => {
    // 禁用按钮
    setShow(true)
    // 倒计时
    TimeRef.current = setInterval(() => {
      setCount(count => {
        if (count === 0) {
          // 清除定时器
          clearInterval(TimeRef.current)
          // 启用按钮
          setShow(false)
          setCount(10)
        }
        return count - 1
      })
    }, 1000)
  }
  return (<div>
        倒计时组件
        <button type="button"
        onClick={() => { hClick(!isShow) }}
        disabled={isShow}
        // eslint-disable-next-line no-constant-condition
        >{ isShow ? count + '秒再试' : '发送验证码'}</button>
    </div>)
}
ReactDOM.render(<CountDown />, document.getElementById('root'))