React中如何实现点击按钮循环切换三种背景颜色样式

核心修改思路 #

• 放弃原有的布尔类型状态：布尔值仅支持2种状态切换，改用数值类型的状态值承载3种状态
• 实现循环逻辑：每次点击后状态值+1，对3取模即可自动实现0→1→2→0的循环效果
• 颜色映射简化：用数组存储三种状态对应的颜色，直接通过状态索引读取对应颜色，后续新增状态也只需扩展数组即可

修改后完整代码 #

import { useState } from 'react';

// 注意：React组件名必须大写开头，原小写letter不符合规范，改为Letter
export default function Letter({ letter }) {
  const upper = letter.toUpperCase();
  // 状态值 0=初始灰色 1=红色 2=蓝色
  const [colorState, setColorState] = useState(0);
  // 三种状态对应的背景色，顺序和状态值一一对应
  const colorList = ['gray', 'salmon', 'lightblue'];

  const handleClick = () => {
    // 每次点击+1后对3取模，自动循环
    setColorState(prev => (prev + 1) % 3);
  };

  return (
    <button
      className="letterBtns"
      onClick={handleClick}
      variant="contained"
      style={{ backgroundColor: colorList[colorState] }}
    >
      {upper}
    </button>
  );
}

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