VerifyCode 手机验证码

输入手机号后，发送验证码

import React, { useState, useRef, useEffect } from 'react';
import { string, func, object, bool } from "prop-types";
import { Input, Button, Space } from 'antd'
VerifyCode.propTypes = {
  value: string,
  onChange: func,
  style: object,
  readyPost: bool,
};
function VerifyCode (props) {
  const { readyPost, ...inputProps } = props;
  const [lastTime, setLastTime] = useState(0);
  const timerRef = useRef(null);
  console.log(16, props)
  useEffect(() => {
    return () => {
      if (timerRef.current) {
        clearTimeout(timerRef.current)
      }
    }
  }, [])
  function counting(time = 60): void {
    console.log('time60', time)
    if (time < 0) return
    setLastTime(time)
    console.log(29, timerRef.current, 'time', time)
    timerRef.current = setTimeout(() => {
      counting(time - 1)
    }, 1000)
  }
  console.log('lastItme', lastTime)
  return (
    <Space>
      <Input
        {...inputProps}
        style={{  marginRight: 16, ...inputProps.style }}
      />
      {lastTime === 0 && (
        <Button
          disabled={!readyPost}
          block
          onClick={() => counting()}
        >
          发送验证码
        </Button>
      )}
      {lastTime > 0 && <span>剩余{lastTime} 秒 </span>}
    </Space>
  )
}
export default VerifyCode;