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

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 {&nbsp; background: magenta;&nbsp; color: white;}演示：https ://codesandbox.io/s/optimistic-easley-ugl1i?file=/src/App.js如果您有任何问题或建议，请随时提出。