React中如何实现点击循环切换三种状态的普通按钮

完全可以实现，这类按钮和双态toggle的逻辑差异仅在于状态数量从2个变为3个，不需要引入第三方组件，用React原生的状态能力即可完成。

核心实现逻辑 #

• 提前定义好三个状态的配置项（包含按钮文案、样式、对应的业务值等），避免代码里出现无意义的魔法值
• 用状态钩子维护当前激活状态的索引值，初始值默认指向第一个状态
• 按钮点击时，将当前索引值+1后对状态总长度取模，即可实现0→1→2→0的无限循环切换
• 根据当前激活的状态配置，动态渲染按钮的展示样式、文案，触发对应业务逻辑即可

可直接运行的代码示例 #

import { useState } from 'react';

// 三个状态的配置可根据业务场景自由替换
const BUTTON_STATE_CONFIG = [
  { text: '未开始', bgColor: '#909399', bizValue: 'idle' },
  { text: '进行中', bgColor: '#409eff', bizValue: 'processing' },
  { text: '已完成', bgColor: '#67c23a', bizValue: 'done' }
];

export default function TriStateButton() {
  const [currentIndex, setCurrentIndex] = useState(0);
  const activeState = BUTTON_STATE_CONFIG[currentIndex];

  const handleButtonClick = () => {
    // 核心循环逻辑，即使后续调整状态数量（比如改成4态），这行逻辑也不需要改动
    setCurrentIndex(prev => (prev + 1) % BUTTON_STATE_CONFIG.length);
    
    // 此处可追加状态切换后的业务逻辑，比如上报、接口请求等
    // if (activeState.bizValue === 'done') { ... }
  };

  return (
    <button
      onClick={handleButtonClick}
      style={{
        padding: '8px 18px',
        border: 'none',
        borderRadius: '4px',
        color: '#fff',
        backgroundColor: activeState.bgColor,
        cursor: 'pointer'
      }}
    >
      {activeState.text}
    </button>
  );
}

扩展说明 #

如果是类组件场景，逻辑完全一致：仅需将useState替换为类组件的this.state存储当前索引，点击事件中调用setState更新索引值即可。
如果需要支持反向切换、状态跳转、切换前确认等能力，只需要在点击事件函数中追加对应判断逻辑，核心的索引循环计算逻辑不需要改动。

内容的提问来源于stack exchange，提问作者Marcel Drąg