使用 React 构建动态倒计时按钮组件

见解分享

2023-10-09 02:30:31

React 中的倒计时按钮：提升验证码登录体验

导言

在当今数字时代，确保在线交易和通信的安全至关重要。验证码已成为防止网络钓鱼和欺诈活动的一道坚固屏障。通过要求用户输入一个短暂生成的唯一代码，验证码为未经授权的访问增加了一层保护。

使用 React 构建倒计时按钮组件

React，一个备受推崇的 JavaScript 库，以其组件化架构和声明式编程范例著称。它使开发人员能够轻松地创建交互式且可维护的应用程序。

我们的倒计时按钮组件将作为验证码登录系统的一部分，在用户输入其用户名和密码后显示。该组件提供一个按钮，用户点击后将开始倒计时。倒计时结束后，按钮将被禁用，直到系统刷新或用户重新启动倒计时。

组件功能实现

初始状态

我们的组件从初始状态开始，包括以下属性：

isCounting：一个布尔值，指示计时器是否正在运行。
timeRemaining：一个数字，表示剩余的倒计时时间（以秒为单位）。
intervalId：一个可选值，存储计时器间隔的 ID，如果计时器正在运行的话。

启动和停止计时器

用户点击按钮后，组件调用一个函数来启动计时器。该函数将 isCounting 设置为 true，并创建 setInterval() 间隔，每秒将 timeRemaining 递减 1。

当计时器完成或用户重新启动计时器时，组件调用另一个函数来停止计时器。该函数清除 setInterval() 间隔，并将 isCounting 设置为 false。

按钮状态管理

根据 isCounting 和 timeRemaining 的值，组件切换按钮的状态。当计时器正在运行时，按钮将被禁用。当计时器完成时，按钮将重新启用，并显示一条消息，提示用户可以重新启动计时器。

可视化效果

为了提升用户体验，组件使用 CSS 样式实现可视化效果。当计时器正在运行时，按钮呈现一种颜色；当计时器完成时，它呈现另一种颜色。此外，组件显示一个文本标签，指示剩余的倒计时时间。

完整代码示例

完整的组件代码如下：

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

const CountdownButton = () => {
  const [isCounting, setIsCounting] = useState(false);
  const [timeRemaining, setTimeRemaining] = useState(60);
  const [intervalId, setIntervalId] = useState(null);

  const startTimer = () => {
    setIsCounting(true);
    const id = setInterval(() => {
      setTimeRemaining(prev => prev - 1);
    }, 1000);
    setIntervalId(id);
  };

  const stopTimer = () => {
    setIsCounting(false);
    clearInterval(intervalId);
  };

  useEffect(() => {
    if (timeRemaining === 0) {
      stopTimer();
    }
  }, [timeRemaining]);

  return (
    <button
      onClick={isCounting ? stopTimer : startTimer}
      disabled={isCounting}
      style={{
        backgroundColor: isCounting ? 'red' : 'green',
        color: 'white',
        padding: '10px',
        borderRadius: '5px',
      }}
    >
      {isCounting ? `Time remaining: ${timeRemaining}` : 'Start Timer'}
    </button>
  );
};

export default CountdownButton;