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


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

算法

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

  • 创建一个包含每个按钮数据的对象数组

  • 使用map()方法渲染按钮并分配默认CSS类

  • 向每个按钮添加事件监听器以监听用户交互

  • 当用户与按钮交互时,使用classList属性将其CSS类切换到所需的类

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

在这种方法中,我们使用useState hook创建一个名为“activeButton”的状态变量,该变量将存储当前活动按钮的ID。然后,我们将此状态变量作为三元运算符传递给按钮的className属性。如果按钮的ID与activeButton状态匹配,则添加“active”CSS类,否则保持为空。

当用户点击按钮时,handleButtonClick函数将activeButton状态更新为被点击按钮的ID,从而导致组件重新渲染并切换相应按钮的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;

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

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

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类,并添加一个事件监听器来监听点击事件。

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

示例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样式。我们没有添加点击事件监听器,而是向每个按钮添加了一个焦点事件监听器。当用户使用键盘(例如,按Tab键)导航到按钮时,会触发此事件监听器。

当触发焦点事件时,我们遵循与前一个示例相同的逻辑来切换按钮的CSS类。

结论

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

更新于:2023年4月17日

232 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告