更改react.js中单击按钮的背景颜色

Question

var buttons = document.getElementsByClassName("time-button");

var click_listener = function(event) {
  //console.log("clicked " + event.target);
  for (var i = 0; i < buttons.length; i++) {
    buttons[i].classList.remove("clicked");
  }
  event.target.classList.add("clicked");
};
for (var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", click_listener, false);
}

.clicked {
  background-color: orange;
}

<button className="time-button">9:30 am</button>
<button className="time-button">9:00 am</button>
<button className="time-button">8:30 am</button>
<button className="time-button">8:00 am</button>

我尝试在单击操作时更改背景颜色！所以首先点击橙色，其他点击没有背景，。每个按钮都必须单击才能更改背景！ 但我不能用这种方式删除类

我希望代码能够处理按钮点击，第一次点击橙色背景，第二次点击没有背景等等。我这样做的方式，我可以更改一个按钮并删除其他按钮的背景，我希望每个按钮都能通过单击来工作，有人可以帮忙吗？

Answer 1

在 React 中，您应该使用状态来定义 UI 的呈现方式，而不是 DOM 方法（

getElementsByClassName()

、

.classList.add()

等）。这个想法是，如果你想改变你的 UI，你可以改变你的状态，然后相应地重新渲染你的 UI。为了实现您想要做的事情，您应该首先将按钮定义为数组中的对象，然后您可以在 JSX 中对其进行

.map()

操作。当您单击按钮时，您可以使用该对象的 id 来标记当前“活动”按钮（也存储在状态中），您可以使用它来确定您的

clicked

类是否应用于映射的按钮：

const { useState } = React;
const times = [
  {id: 0, time: "9:30 am"},
  {id: 1, time: "9:00 am"},
  {id: 2, time: "8:30 am"},
  {id: 3, time: "8:00 am"}
];

const App = () => {
  const [activeButton, setActiveButton] = useState(-1); // -1 to indicate that there are no active buttons
  
  const handleClick = (id) => {
    setActiveButton(currId => currId === id ? -1 : id);
  }
  
  return <React.Fragment>
    {
      times.map(({id, time}) => 
        <button 
          key={id}
          className={"time-button" + (id === activeButton ? " clicked" : "")}
          onClick={() => handleClick(id)}
        >{time}</button>)
    }
  </React.Fragment>;
}

ReactDOM.createRoot(document.body).render(<App />);

.clicked {
  background-color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>