onclick反应，我想让我的按钮改变颜色

Question

使用地图功能并显示的按钮不止一个。想要更改我单击的按钮的背景颜色。而其他人则希望它保持原样。当我再次单击另一个按钮时，仅更改该按钮的 BG 颜色。 这是我已经拥有的：

const handleClick = (option, index) => {
  const nextQuestion = currentQuestion + 1;
  if (data[currentQuestion].answer === option) {
     // setChangeColor(isCorrect);
     isCorrect = "bg-success text-white";
     setTimeout(() => {
        setCurrentQuestion(nextQuestion);
        setMoneyLadder(moneyLadder - 1);
        setChangeColor("");
     }, 2000);
  } else {
     // setChangeColor(isIncorrect);
     isIncorrect = "bg-danger";
     setTimeout(() => {
        window.location.reload();
        setCurrentQuestion(0);
        setMoneyLadder(15);
        setChangeColor("");
     }, 2000);
  }
};


 <div className="answers">
  {data[currentQuestion].options.map(
      (option, index) => (
        <button
            className={
              // data[currentQuestion].answer ===
              // option
              //    ? "text-success"
              //    : ""
            }
            key={index}
            onClick={() =>
              handleClick(option, index)
            }
            dangerouslySetInnerHTML={{
              __html: `${index + 1})  ${option}`,
            }}
        ></button>
      )
  )}
 </div>

有什么想法吗？

Answer 1

您可以使用 bool (buttonSelected) 数组初始化状态变量。然后，在 handleClick 和 index 上拦截单击的按钮并切换布尔值。用button的风格你可以写：

{{backgroundColor: buttonSelected[index] ? 'red':'green'}}

如果单击按钮，则背景颜色变为red，否则为green：

const [buttonSelected, setButtonSelected] = useState(new Array(data[currentQuestion].options.length).fill(false));

const handleClick = (index) => {
   let result = [...buttonSelected];
   result[index] = !result[index];
   setButtonSelected(result);
}

<div className="answers">
                          {data[currentQuestion].options.map(
                             (option, index) => (
                                <button
                                   className={
                                      // data[currentQuestion].answer ===
                                      // option
                                      //    ? "text-success"
                                      //    : ""
                                   }
                                   style={{backgroundColor: buttonSelected[index] ? 'red':'green'}}
                                   key={index}
                                   onClick={() =>
                                      handleClick(index)
                                   }
                                   dangerouslySetInnerHTML={{
                                      __html: `${index + 1})  ${option}`,
                                   }}
                                ></button>
                             )
                          )}
 </div>