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

我们可以在单击按钮时更改按钮的颜色，也可以使用 map()函数将先前选择的按钮的颜色更改回其初始原始颜色。

创建 React 应用程序：

步骤 1：使用以下命令创建 React 应用程序：

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移至该文件夹：

cd foldername

项目结构：它将如下所示。

项目结构

示例：在下面的示例中，我们在状态中存储了当前选定按钮的名称（或某个 ID）。

文件名：App.js

HTML

import React, { useState } from "react";
  
const App = () => {
  const menuItems = ["Easy", "Medium", "Hard"];
  const [activeButton, setActiveButton] = useState("");
  
  return (
    

      {menuItems.map((level, idx) => {
        return (
           {
              setActiveButton(level);
            }}
            style={{
              backgroundColor: activeButton === level ? "lightblue" : ""
            }}
          >
            {level}
          
        );
      })}
    
  );
}
  
export default App;

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：

单击按钮之间的颜色切换

注意：我们应该注意的一件事是以不同的方式命名按钮。此外，一个更令人鼓舞的方法是为按钮使用 ID，如下所示：

const menuItems = [{id:1, name:"Easy"}, 
                        {id:2, name:"Medium"}, 
                        {id:3, name:"Hard"}]