在按钮单击时设置颜色，例如选择取消选择颜色更改答案

【问题标题】：Set color on button click, like select unselect color change在按钮单击时设置颜色，例如选择取消选择颜色更改
【发布时间】：2020-11-27 09:47:38
【问题描述】：

我正在尝试使用 ant d 的头像作为 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;
}

重点不是我无法在选择时更改颜色。其他逻辑按预期工作但不是变色。

所以最初它有白色背景和黑色文本，当我选择它时，它被选中并且颜色变为蓝色背景和白色文本。

但是从上面的代码我得到了这个输出

不，白色正在设置，选择按钮时没有颜色变化。

以下是我所期望的..

有人可以帮我吗？我做错了什么？

【问题讨论】：

你能在codesandbox.io/s/new复制这个吗？
@ArunkumarRamasamy 可能会检查此codesandbox.io/s/festive-dream-7p3hw?file=/src/App.js（不完全相同，但您可以关联——也检查控制台日志）

标签： javascript css reactjs redux sass

【解决方案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

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

【讨论】：