javascript - 在 React 中，单击时如何向按钮添加类

Question

我是 Reactjs 的新手。单击时如何向按钮添加类？还应删除其他按钮类

到目前为止，这是我尝试过的。请帮忙。

import React, { useState } from "react";
 
export default function App() {
  const [isActive, setActive] = useState("false"); 
  const handleToggle = () => {
    setActive(!isActive);
  };
  return (
    <div > 
      <button onClick={handleToggle}  className={isActive ? "active" : null}>Sunday</button>
      <button onClick={handleToggle} className={isActive ? "active" : null}>Monday</button> 
      <button onClick={handleToggle} className={isActive ? "active" : null}>Tuesday</button> 
      <button onClick={handleToggle} className={isActive ? "active" : null}>Wedsday</button> 
      <button onClick={handleToggle} className={isActive ? "active" : null}>Thursday</button> 
      <button onClick={handleToggle} className={isActive ? "active" : null}>Friday</button> 
      <button onClick={handleToggle} className={isActive ? "active" : null}>Saturday</button> 
    </div>
  );
}

Answer 1

一种方法是使用带有索引的数组映射，如下所示:

import React, { useState } from "react";
 
export default function App() {
  const days = ['Monday', 'Tuesday', ... ]
  const [activeIndex, setActiveIndex] = useState(-1); 
  const handleToggle = (index) => {
    setActiveIndex(index);
  };
  return (
    <div > 
{days.map((day, index) => (
      <button onClick={()=> handleToggle(index)}  className={activeIndex === index ? "active" : null}>{day}</button> 
)
    </div>
  );
}