ReactJs 将 'active' class 添加到按钮列表中的按钮

Question

我有一个使用 .map 函数动态创建的按钮列表。我正在尝试向按钮 onClick 添加一个“活动”class 并删除其他按钮的“活动”class。

这就是我目前所拥有的。问题是它添加了 class 但没有去掉其他按钮上的 class。任何帮助表示赞赏！谢谢:)

const Buttons = (props) => {
  const [active, setActive] = useState(false);
  const handleClick = (event) => {
    event.preventDefault();
    setActive(true)
  }
    const buttons = props.buttons.map((btn,index) => {
        return(
        
      <button className={active === true ? 'active' : ''} id={btn.id} onClick={handleClick}>{btn.name}</button>
        )
    })
    return (
        <div>
         {buttons}
        </div>
    )
}
export default Buttons;

Answer 1

由于您需要知道哪个按钮处于活动状态，因此最好将活动按钮的id存储在状态中，而不仅仅是一个布尔值。这样，您就可以准确地知道在映射它们时应该激活哪个。

const Buttons = (props) => {
  const [active, setActive] = useState();

  const handleClick = (event) => {
    event.preventDefault();
    setActive(event.target.id);
  }

  const buttons = props.buttons.map((btn, index) => {
    return (
      <button
        key={btn.id}
        className={active === btn.id ? "active" : undefined}
        id={btn.id}
        onClick={handleClick}
      >
        {btn.name}
      </button>
    );
  });
  return <div>{buttons}</div>;
};

export default Buttons;

ReactJs 将 'active' class 添加到按钮列表中的按钮

ReactJs adding 'active' class to a button in a list of buttons

javascript

reactjs

react-hooks

use-state