Блог

Я новичок в реагировании, и я надеялся, что кто-нибудь сможет помочь мне с этой проблемой. У меня есть несколько кнопок, которые я хочу иметь возможность нажимать и изменять цвет фона в цикле. Сначала я настроил его на работу с 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>
  );
}
 

 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>
);
}
 

Вы можете обновить, как это, array и index получить vaue

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

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

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