如何在使用 Map() 渲染的按钮之间切换 CSS 类?

cssweb developmentfront end technology更新于 2024/4/10 8:44:17

在构建 Web 应用程序时，开发者经常需要创建具有动态样式的按钮。最有效的方法之一是使用 JavaScript 中的 map() 方法。此方法允许您根据数据以不同的样式渲染多个按钮。但是，有时您可能希望根据用户交互或其他事件动态更改按钮的 CSS 类。在本文中，我们将讨论两种在 JavaScript 中使用 map() 渲染的按钮之间切换 CSS 类的方法。

算法

使用 map() 渲染的按钮之间切换 CSS 类的算法包括以下步骤:

创建一个包含每个按钮数据的对象数组
使用 map() 方法渲染按钮并分配默认 CSS 类
为每个按钮添加事件监听器以监听用户交互
当用户与按钮交互时，使用 classList 属性将其 CSS 类切换为所需的类

方法 1:使用状态和三元运算符

在此方法中，我们使用 useState 钩子创建一个名为"activeButton"的状态变量，用于存储当前活动按钮的 ID。然后，我们将此状态变量作为三元运算符传递给按钮的 className 属性。如果按钮的 ID 与 activeButton 状态匹配，则添加"active"CSS 类，否则，将其留空。

当用户点击按钮时，handleButtonClick 函数会使用被点击按钮的 ID 更新 activeButton 状态，从而导致组件重新渲染并切换相应按钮的 CSS 类。

import React, { useState } from "react";
const buttonsData = [
   { id: 1, label: "Button 1" },
   { id: 2, label: "Button 2" },
   { id: 3, label: "Button 3" },
];
const App = () => {
   const [activeButton, setActiveButton] = useState(null);
   const handleButtonClick = (id) => {
      setActiveButton(id);
   };

   return (
      <div>
         {
            buttonsData.map(({ id, label }) => (
               <button
                  key={id}
                  onClick={() => handleButtonClick(id)}
                  className={activeButton === id ? "active" : ""}
                  >
                  {label}
               </button>
            ))
         }
      </div>
   );
};
export default App;

方法 2:使用基于类的组件和条件渲染

在此方法中，我们使用基于类的组件而不是函数式组件。我们在类本身中定义状态和事件处理程序。其余代码与上一种方法几乎相同。

import React, { Component } from "react";
const buttonsData = [
   { id: 1, label: "Button 1" },
   { id: 2, label: "Button 2" },
   { id: 3, label: "Button 3" },
];

class App extends Component {
   state = {
      activeButton: null,
   };

   handleButtonClick = (id) => {
      this.setState({ activeButton: id });
   };

   render() {
      const { activeButton } = this.state;

      return (
         <div>
            {
               buttonsData.map(({ id, label }) => (
                  <button
                     key={id}
                     onClick={() => this.handleButtonClick(id)}
                     className={activeButton === id ? "active" : ""}
                     >
                     {label}
                  </button>
               ))
            }
         </div>
      );
   }
}

export default App;

示例 1:点击切换 CSS 类

在此示例中，我们将在用户点击按钮时切换其 CSS 类。

<!DOCTYPE html>
<html>
<head>
   <style>
      .default {
         background-color: gray;
         color: white;
      }
      .active {
         background-color: blue;
         color: white;
      }
   </style>
</head>
<body>
   <div id="buttons-container"></div>
   <script>
      const buttonsData = [
         { id: 1, label: "Button 1" },
         { id: 2, label: "Button 2" },
         { id: 3, label: "Button 3" },
      ];

      const buttonsContainer = document.getElementById("buttons-container");

      buttonsData.forEach(({ id, label }) => {
         const button = document.createElement("button");
         button.textContent = label;
         button.className = "default";
         button.addEventListener("click", () => {
            const activeButton = buttonsContainer.querySelector(".active");
            if (activeButton) {
               activeButton.classList.remove("active");
            }
            button.classList.add("active");
         });
         buttonsContainer.appendChild(button);
      });
   </script>
</body>
</html>

在此示例中，我们创建了一个简单的 HTML 页面，其中包含按钮的容器以及默认类和活动类的 CSS 样式。然后，我们使用 forEach() 方法遍历 buttonsData 数组，并为每个项目创建一个按钮元素。我们为每个按钮设置默认 CSS 类，并添加一个事件监听器来监听点击事件。

当用户点击按钮时，我们首先找到当前活动的按钮(如果有)并从中移除活动类。然后将活动类添加到被点击的按钮。

示例 2:使用键盘导航切换 CSS 类

在此示例中，当用户使用键盘导航到按钮时，我们将切换按钮的 CSS 类。

<!DOCTYPE html>
<html>
<head>
   <style>
      .default {
         background-color: gray;
         color: white;
      }
      .active {
         background-color: red;
         color: white;
      }
   </style>
</head>
<body>
   <div id="buttons-container"></div>
   <script>
      const buttonsData = [
         { id: 1, label: "Button 1" },
         { id: 2, label: "Button 2" },
         { id: 3, label: "Button 3" },
      ];

      const buttonsContainer = document.getElementById("buttons-container");

      buttonsData.forEach(({ id, label }) => {
         const button = document.createElement("button");
         button.textContent = label;
         button.className = "default";
         button.addEventListener("focus", () => {
            const activeButton = buttonsContainer.querySelector(".active");
            if (activeButton) {
               activeButton.classList.remove("active");
            }
            button.classList.add("active");
         });
         buttonsContainer.appendChild(button);
      });
   </script>
</body>
</html>

在此示例中，我们使用与上一个示例相同的 HTML 和 CSS 样式。我们没有添加 click 事件监听器，而是为每个按钮添加了 focus 事件监听器。当用户使用键盘导航到按钮(例如，按下 Tab 键)时，会触发此事件监听器。

触发 focus 事件时，我们遵循与上一个示例相同的逻辑来切换按钮的 CSS 类。

结论

在本文中，我们讨论了两种在使用 JavaScript 中的 map() 渲染的按钮之间切换 CSS 类的不同方法。我们首先解释了完成此任务的算法，然后提供了两种不同的方法，并附上了代码和说明。第一种方法是使用 React 中的 useState 钩子创建一个状态变量，用于存储当前活动按钮的 ID。然后，我们使用三元运算符根据 activeButton 状态切换按钮的 CSS 类。第二种方法是使用基于类的组件和条件渲染来实现相同的结果。我们还提供了两个示例，演示如何在用户交互和键盘导航的情况下切换按钮的 CSS 类。通过遵循这些方法，您可以创建具有不同样式的动态按钮，并根据用户交互或其他事件轻松地在它们之间切换。