React 类组件实现验证码倒计时功能

您可以使用 useState 声明一个倒计时的状态，并使用 setInterval 定时器来更新倒计时的值。以下是一个示例代码：

import React, { useState, useEffect } from 'react';

const Countdown = () => {
  const [countdown, setCountdown] = useState(60);

  useEffect(() => {
    const timer = setInterval(() => {
      setCountdown((prevCountdown) => prevCountdown - 1);
    }, 1000);

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

  const handleButtonClick = () => {
    // TODO: 处理获取验证码逻辑
  };

  return (
    <div>
      <button onClick={handleButtonClick} disabled={countdown > 0}>
        {countdown > 0 ? `${countdown} 秒后重新获取` : '获取验证码'}
      </button>
    </div>
  );
};

export default Countdown;

在上面的代码中，我们使用 useState 声明了一个名为 countdown 的状态变量，并将其初始值设为 60。然后，我们使用 useEffect 副作用钩子函数来启动一个定时器，每隔一秒更新一次倒计时的值。在组件卸载时，我们清除定时器以避免内存泄漏。

在 handleButtonClick 函数中，您可以处理获取验证码的逻辑。在按钮上，我们使用 disabled 属性来禁用按钮，并根据倒计时的值来显示按钮文本。

请注意，在使用 useState 和 useEffect 之前，您需要在组件的导入语句中添加对 react 和 react-dom 的引用。