TypeScript实现三状态循环切换按钮（文字与颜色变化）求助

以下提供两种常见场景的实现方案，你可以根据项目环境选择：

React + TypeScript 实现 #

这种方案适合React项目，利用React的状态管理跟踪按钮状态：

import React, { useState } from 'react';

// 定义按钮状态类型
type ButtonState = {
  text: string;
  color: string;
};

// 存储三种状态的配置
const buttonStates: ButtonState[] = [
  { text: "状态一", color: "#4CAF50" },
  { text: "状态二", color: "#2196F3" },
  { text: "状态三", color: "#FF9800" },
];

const CycleButton: React.FC = () => {
  // 跟踪当前状态的索引
  const [currentStateIndex, setCurrentStateIndex] = useState(0);
  const currentState = buttonStates[currentStateIndex];

  const handleClick = () => {
    // 通过取模运算实现循环切换：索引+1后对状态总数取余
    setCurrentStateIndex(prev => (prev + 1) % buttonStates.length);
  };

  return (
    <button
      onClick={handleClick}
      style={{
        padding: '10px 20px',
        fontSize: '16px',
        color: 'white',
        backgroundColor: currentState.color,
        border: 'none',
        borderRadius: '4px',
        cursor: 'pointer',
        transition: 'background-color 0.3s ease' // 添加颜色过渡动画
      }}
    >
      {currentState.text}
    </button>
  );
};

export default CycleButton;

纯TypeScript + DOM 实现 #

如果是原生TS项目，不需要React，可以直接操作DOM实现：

HTML部分 #

<button id="cycle-button" style="padding: 10px 20px; font-size: 16px; color: white; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease;"></button>

TypeScript部分 #

type ButtonState = {
  text: string;
  color: string;
};

const buttonStates: ButtonState[] = [
  { text: "状态一", color: "#4CAF50" },
  { text: "状态二", color: "#2196F3" },
  { text: "状态三", color: "#FF9800" },
];

let currentIndex = 0;
const cycleButton = document.getElementById('cycle-button') as HTMLButtonElement;

// 更新按钮显示状态的函数
function updateButton() {
  const state = buttonStates[currentIndex];
  cycleButton.textContent = state.text;
  cycleButton.style.backgroundColor = state.color;
}

// 绑定点击事件
cycleButton.addEventListener('click', () => {
  currentIndex = (currentIndex + 1) % buttonStates.length;
  updateButton();
});

// 初始化按钮状态
updateButton();

核心说明 #

• 用取模运算实现循环逻辑：(currentIndex + 1) % buttonStates.length，确保索引始终在0到2之间循环。
• 状态配置数组buttonStates可灵活扩展，新增状态只需在数组中添加新对象即可。
• 添加transition样式让颜色切换更平滑，提升交互体验。

内容的提问来源于stack exchange，提问作者kevn