React-hooks/TypeScript/Taro 实现发送验证码倒计时

import { Form, Toast, Cell, Input, Field, Button } from '@taroify/core';
import { View } from '@tarojs/components';
import React, { useEffect, useState } from 'react';

import styles from './index.module.scss';
let timeFun: NodeJS.Timer;

const UsernameLogin: React.FC = () => {
  const [btnTitle, setBtnTitle] = useState<string>('发送验证码');
  const [btnDisabled, setBtnDisabled] = useState<boolean>(false);
  const [time, setTime] = useState<number>(60);

  useEffect(() => {
    clearInterval(timeFun);
    return () => {
      clearInterval(timeFun);
    };
  }, []);

  useEffect(() => {
    if (btnDisabled && time > 0 && time < 60) {
      setBtnTitle(`${time}s后重发`);
    } else {
      setBtnTitle('发送验证码');
      setBtnDisabled(false);
      setTime(60);
      clearInterval(timeFun);
    }
  }, [time]);

  const onSubmit = () => {};

  const sendVerifCode = () => {
    // eslint-disable-next-line
    timeFun = setInterval(() => setTime((t) => --t), 1000);
    setBtnDisabled(true);
  };

  return (
    <View className={styles.page}>
      <Form onSubmit={onSubmit}>
        <Toast id='toast' />
        <Cell.Group inset>
          <Field
            label={{ align: 'left', children: '验证码' }}
            name='text'
            rules={[{ required: true, message: '请填写验证码' }]}
          >
            <Input placeholder='请输入验证码' />
            <Button color='primary' disabled={btnDisabled} onClick={sendVerifCode} size='small'>
              {btnTitle}
            </Button></Field>
        </Cell.Group>
        <View style={{ margin: '16px' }}>
          <Button
            block
            color='primary'
            formType='submit'
            shape='round'
            style={{ backgroundColor: '#1aad19', color: '#fff' }}
          >
            登录
          </Button>
        </View>
      </Form>
    </View>
  );
};

export default UsernameLogin;