通过React

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属性为true，则用户应在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