如何切换使用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类。通过遵循这些方法,您可以创建具有不同样式的动态按钮,并根据用户交互或其他事件轻松地在它们之间切换。