极客笔记如何在使用map()方法渲染的按钮之间切换CSS类
在构建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 hook创建一个状态变量，用于存储当前活动按钮的ID。然后，我们使用三元运算符根据activeButton状态来切换按钮的CSS类。第二种方法是使用基于类的组件和条件渲染来实现相同的结果。我们还提供了两个工作示例，演示了如何通过用户交互和键盘导航切换按钮的CSS类。通过遵循这些方法，您可以创建具有不同样式的动态按钮，并根据用户交互或其他事件轻松切换它们。