React实现div点击切换样式与状态，排除submenu按钮触发

核心实现思路 #

1. 用React状态管理当前激活的元素ID，控制样式和文本显示
2. 给每个可点击的div设置唯一ID，避免DOM冲突
3. 阻止按钮的事件冒泡，防止触发父元素的点击逻辑
4. 动态绑定样式和条件渲染"Active"文本

完整代码实现 #

App.js

import { useState } from "react";
import "./styles.css";

const data = [
  { id: "1", title: "first element" },
  { id: "2", title: "second element" },
  { id: "3", title: "third element" },
];

export default function App() {
  // 记录当前激活的元素ID，初始无激活状态
  const [activeId, setActiveId] = useState(null);

  // 处理main div的点击事件，更新激活状态
  const handleMainClick = (itemId) => {
    setActiveId(itemId);
  };

  // 处理按钮点击，阻止事件冒泡到父级div
  const handleButtonClick = (e) => {
    e.stopPropagation();
  };

  return (
    <div className="container">
      {data.map((item) => (
        <div
          key={item.id}
          id={`main-${item.id}`}
          className={`main-item ${activeId === item.id ? "active" : ""}`}
          onClick={() => handleMainClick(item.id)}
        >
          <div className="item-title">{item.title}</div>
          {/* 激活时显示Active文本 */}
          {activeId === item.id && <div className="active-text">Active</div>}
          <button className="submenu-btn" onClick={handleButtonClick}>
            submenu
          </button>
        </div>
      ))}
    </div>
  );
}

styles.css

.container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
}

/* 默认样式：绿色背景 */
.main-item {
  background-color: green;
  padding: 15px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* 激活状态样式：红色背景+红色边框 */
.main-item.active {
  background-color: red;
  border: 2px solid red;
}

.active-text {
  margin-top: 8px;
  font-weight: bold;
}

.submenu-btn {
  margin-top: 10px;
  padding: 5px 10px;
  cursor: pointer;
}

关键细节说明 #

• 唯一ID：每个main div的ID设为main-${item.id}，解决原代码中ID重复的无效DOM问题
• 状态切换：点击不同的main div时，activeId会更新为对应元素的ID，自动触发样式和文本的切换
• 事件阻止：按钮点击时调用e.stopPropagation()，确保点击子按钮不会触发父元素的激活逻辑
• 动态样式：通过条件类名active控制元素的背景色和边框，实现默认与激活状态的切换

内容的提问来源于stack exchange，提问作者Paul