我们如何告诉 react-rnd 传递 onClick 事件，有时传递，有时不传递

问题描述

我们创建了看起来相同的容器。我们已经为每个添加了 RnD。每个按钮的右上角都有一个关闭图标，并附有 onClick。当我查看 Chrome 事件侦听器时，在某些容器中，RnD 会将点击传递到我们的关闭图标，而在其他容器中则不会。我们得到了两个容器的 mousedown。 RnD 似乎在两者上添加了相同的类。在不起作用的容器上，双击也无法通过。 Z-index 无关紧要。有没有人对如何调试为什么某些容器正常工作而其他容器不工作有任何建议？

解决方法

这似乎与鼠标向上和向下事件的传播有关。通过放置一个停止传播的新包装器，所有 div 都可以正常工作。

const PreserveFocusWrapper = ({ children }) => (    
  <div
    onMouseDown={(event) => { event.stopPropagation() }}
    onMouseUp={(event) => { event.stopPropagation() }}
  >
    { children }
  </div>
)

导出默认 PreserveFocusWrapper

显然没有这个，关闭图标（作为一个孩子）不会被传递到 onClick 或 onMouseUp 事件。