如何在 React 中为按钮 onClick 循环不同的样式

Question

我是 React 的新手，我希望有人能帮助我解决这个问题。我有许多按钮，我希望能够单击它们并循环更改它们的背景颜色。我最初将它设置为适用于 2 种颜色，但我意识到我想要一种永远不会被点击的中性色。

现在，代码已设置为使用三元语句仅在 2 种颜色之间更改（并且必须开始使用两种颜色中的一种作为默认值），我不确定如何将代码重构为包括三分之一。

我希望它变成灰色、红色、蓝色，然后在第 3 次点击时变回灰色以开始循环。

这是当前代码

  export default function letter({ letter }) {
  let upper = letter.toUpperCase();

  const [flag, setFlag] = useState(null);

  const handleClick = () => {
    setFlag(!flag);
  };

  return (
    <button
      className="letterBtns"
      onClick={handleClick}
      variant="contained"
      style={{ backgroundColor: flag ? "salmon" : "lightblue" }}
    >
      {upper}
    </button>
  );
}

Answer 1

您可以像这样使用 array 和 index 更新以获得价值

const colors = ["gray", "red", "blue"];
const [flag, setFlag] = useState(0);

const handleClick = () => {
  setFlag(flag === 2 ? 0 : flag + 1);
};

style={{ backgroundColor: colors[flag] }}

Answer 2

export default function letter({ letter }) {
let upper = letter.toUpperCase();
const [counter, setCounter] = useState(0)
let bgColorList = ['gray', 'red', 'blue']

const [flag, setFlag] = useState(null);

const handleClick = () => {
 let ctrTemp = counter >= 2 ? 0 : counter +1
 setCounter(ctrTemp)
 setFlag(!flag);
};

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

如何在 React 中为按钮 onClick 循环不同的样式

How to cycle through different styles for a button onClick in React

javascript

css

onclick

reactjs