Question

想象一下这个结构：

<Item onClick={goToPage}>
  <p>Example Title</p>
  <div> // addition
    <Menu>
      <button onClick={toggleMenuItems}/>
      <MenuItems />
    </Menu>
  </div>
</Item>

菜单组件本身有一个事件处理逻辑：它正在监听窗口上的点击事件并关闭菜单项。这样做是因为一个页面可以有很多菜单，打开一个菜单应该关闭所有其他菜单。

整个父项组件也必须是可点击的。 Item组件中的div（标记为“addition”）必须是独立的 - 因此它可以是一个菜单，但也可以是其他任何东西 - 只是一个文本，例如。

这里的问题是单击Menu的按钮单击事件正在冒泡到Item并向下，尽管Item的onClick也被触发。如果在菜单'onClick内停止传播 - 那么Item的onClick不再被触发，而且window.onClick也被停止，然后其他菜单也无法关闭。

这会是什么解决方案？我怎么能停止onClick for Item而不是其他任何东西？

Answer 1

使用此解决方案检测点击是在组件内部还是外部：

Detect click outside React component

然后仅在内部点击时才应用您的逻辑。

Answer 2

要解决此问题，我必须在单击菜单按钮（或菜单组件中的任何其他区域）时停止冒泡，并使用捕获而不是在菜单内冒泡来执行＆＃34;关闭窗口上的菜单单击组件外部＆＃34;

停止在DOM树中间执行“onClick”事件

2 个答案: