单击按钮设置颜色，如选择取消选择颜色更改

Question

我正在尝试使用 ant d 的 Avatar 作为 multipikcer 按钮，但我想在选择其中任何一个时更改颜色。  const weekDays = ["S", "M", "T", "W", "TH", "F", "ST"];return (<>{weekly && (        <div>{weekDays.map((days, index) => selectedWeekdays(days))}</div>      )}</>)const selectWeekDays = (day) => {    let wD = weekday;    let index = wD.findIndex((d) => d === day);    if (index > -1) {      wD.splice(index, 1);    } else {      wD.push(day);    }    setWeekday(wD);  };  const selectedWeekdays = (days) => {    let index = weekday.findIndex((d) => days.value === d);    let changeColor = (Style["background-color"] = "#FFFFFF");    if (index > -1) {      changeColor = Style["background-color"] = "#ffffff";    }    return (      <Avatar        id={days}        onClick={() => selectWeekDays(days)}        className={changeColor && Style["week-days"]}        key={days}      >        {days}      </Avatar>    );  };这是这个的 SCSS 文件.week-days {  border: "1px solid #000000";  display: "flex";  align-items: "center";  color: "#000000";  height: 55;  cursor: "pointer";  border: 1px solid #ddd;  width: 100;  margin: 2px;  text-align: center;  color: black;}重点不是我无法更改选择时的颜色。其他逻辑正在正常工作但不是颜色变化。所以最初它有白色背景和黑色文本，当我选择它时，它被选中并且颜色变为蓝色背景和白色文本。但是我从上面的代码中得到了这个输出不，白色正在设置，选择按钮上没有颜色变化。下面也是我的期望..有人可以帮我弄这个吗？？我做错了什么？

Answer 1

使用 JavaScript 切换样式类

这个简单的 JavaScript 两行与 CSS 类配对，将根据需要更改颜色。

const dayElement = document.getElementById(day);

dayElement.classList.toggle("selected-day");

.selected-day {

  background: magenta;

  color: white;

}

演示：https ://codesandbox.io/s/optimistic-easley-ugl1i?file=/src/App.js

如果您有任何问题或建议，请随时提出。