React hooks 倒计时

203 阅读1分钟
// 倒计时组件
import React from 'react';

let timer = null
const Love = ({onClick}) => {
    const [time, setTime] = React.useState(0)

    // 清除
    React.useEffect(() => {
        timer && clearInterval(timer);
        return () => timer && clearInterval(timer);
    }, []);

    //执行
    React.useEffect(() => {
        if (time === 60) timer = setInterval(() => setTime(time => --time), 1000)
        else if (time === 0) clearInterval(timer)
    }, [time])

    React.useEffect(() => {
        setTime(60)
    }, [])
    const getCode = () => {
        // 作为组件使用
      /*  onClick && onClick(() => {
            setTime(60)
        })*/
        //直接使用
        setTime(60)
    }
    return (
        <div onClick={getCode} className=''>
            {time ? `${time}秒后获取` : '获取验证码'}
        </div>
    )
}

/*const getCode = (call) => {
    call && call()
}

<VerifyCode onClick={getCode} />*/
export default Love;