获得点击<li>项目作为孩子里面<ul><li>有反应的父母

Question

我正在尝试使用 React 创建嵌套菜单项。 我想像这样创建菜单组件：

       <ul>
          <li><a href="#">Item-1</a></li>
            <li>
                <a href="#">Parent Item 2</a>
                <div class="dropdown">
                    <ul class="dropdown-nav">
                        <li><a href="#">Item2.1</a></li>
                    </ul>
                </div>
            </li>
            <li><a href="#">Item3</a></li>
        </ul>

我创建MenuItem的组件li 。如果用户设置parent道具是真的，那么用户应该创建子MenuItems的内部MenuItem像下面：

<Menu>
 <MenuItem text="Item-1">
 <MenuItem text="Parent Item 2" parent>
   <MenuItem text="Item2.1">
 </MenuItem>
<MenuItem text="Item3">
</Menu>

我想在单击时显示选定的菜单项，但如果存在父项，则仅显示父项文本。无法获取子菜单项文本。

我该如何解决这个问题？

谢谢

Answer 1

可能是因为事件正在冒泡给父级。 如果这是原因，则在单击处理程序中使用evt.stopPropagation()可以防止出现此问题。

我在 codeandbox 中尝试了这个来演示类似的情况。

列表仅在单击时更改背景颜色，并防止更改父列表。

https://codesandbox.io/s/ecstatic-hooks-r5j3g?fontsize=14

这是一篇关于事件冒泡的文章：

https://javascript.info/bubbling-and-capturing#stopping-bubbling