javascript - 如何在使用 .map() 呈现的按钮之间切换 CSS 类

Question

我试图在单击按钮时将按钮的颜色从灰色更改为蓝色，并将先前选择的按钮的颜色更改回灰色，因此只有当前选择的按钮是蓝色的。但是，按钮是使用 map() 方法生成的，因此使用 useState 我可以让所有按钮同时更改颜色:

codesandbox

import React, {useState } from "react";
import "./styles.css";

export default function App() {
  const menuItems = ["day 1", "day 2", "day 3"]
  const [active, setActive] = useState(false);
 
 return (
   <nav>
     {menuItems.map((days, idx) => {
       return (
         <button
           key={days}
           onClick={() => {
             setActive(!active)
           }}
           style={{backgroundColor: active? "blue" : ""}}
         >
           {days}
         </button>
       );
     })}
   </nav>
 );
};

Answer 1

一个可能的解决方案是在状态中存储当前选择的按钮的名称(或一些 Id)。

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const menuItems = ["day 1", "day 2", "day 3"];
  const [activeButton, setActiveButton] = useState('');

  return (
    <nav>
      {menuItems.map((days, idx) => {
        return (
          <button
            key={days}
            onClick={() => {
              setActiveButton(days);
            }}
            style={{ backgroundColor: activeButton === days ? "blue" : "" }}
          >
            {days}
          </button>
        );
      })}
    </nav>
  );
}

确保你的按钮有不同的名称(因为它们现在已经是)，因为你在 key 属性中传递它们。如果您认为将来会有多个按钮具有相同的名称，请也添加一个 id 字段。

const menuItems = [{id: 1, name: "day 1"}, {id: 2, name: "day 2"}, {id: 3, name: "day 3"}];

相应地更新代码。如果情况发生变化，在 key 属性中传递数组索引不是一个好主意。因此，id 字段将派上用场。