React组件中点击Div时排除Submenu按钮触发状态变更的实现

当前你的组件中，点击设备所在的<div>会切换边框颜色，但点击内部的submenu按钮时也会触发这个状态变更。要实现点击按钮时不改变边框颜色，只需要**阻止按钮的点击事件冒泡到父级<div>**即可。

修改后的代码 #

import { useState } from "react";

const data = [
  { id: "1", title: "Samsung" },
  { id: "2", title: "Iphone" },
  { id: "3", title: "LG" },
];

export default function App() {
  const [active, setActive] = useState(null);

  return (
    <span id="main">
      {data.map((item) => (
        <div
          key={item.id}
          onClick={() => setActive(item.id)}
          className={item.id === active ? "active" : "App"}
        >
          <p>{item.title}</p>
          <button onClick={(e) => e.stopPropagation()}>submenu</button>
        </div>
      ))}
    </span>
  );
}

关键修改点 #

• 给submenu按钮添加onClick事件，调用e.stopPropagation()方法，阻止事件向父级<div>冒泡
• 补充了key属性（React列表渲染的必填项，避免控制台警告）

原理说明 #

React的事件遵循冒泡机制，当点击子元素（按钮）时，事件会逐层向上传递到父元素。通过stopPropagation()可以中断这个传递过程，这样父<div>的onClick回调就不会被触发，也就不会执行setActive修改边框状态了。

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