Question

我正在尝试检测一组组件之外的点击。我在Block组件内部有多个名为Artboard的组件。在每个Block组件内部，这是我目前拥有的：

const handleClickOutside = (e) => {
  if (ref && !ref.contains(e.target)) {
    setSelected(false);
  }
}

这可行，但是每当我想实际单击一个块并将其选中时，handleClickOutside()实际上都会触发，因为我在其他所有块组件之外单击。

 -------
|       |
|       |
|       |
 -------

^ This is a selected block

When I click outside of it, it will be deselected.

 -------
|       |
|       |
|       |
 -------

^ But when I click on this block, I'm also clicking
outside the beforementioned block, which causes the
handleClickOutside function to fire.

我只是希望能够选择一个组件，然后通过在其外部单击来取消选择它，而不会影响其他块组件。

Answer 1

我不确定这是否是正确的方法，但是我已经在Codesandbox上尝试过了。它适用于您定义的用例。

因此，在time.sleep(3)组件的onClick处理程序中，您调用Box；在处理程序preventDefault中，您检查handleClickOutside是否为e.defaultPrevented。

这是Codesandbox链接：https://codesandbox.io/s/headless-wind-tr1ns

如果您愿意将true用于ref组件，也可以。您可以阅读以下答案：How to open and close dropdown on btn-click, but in same time with outside click close?

希望这会有所帮助！

也在寻找更好的答案。谢谢：）

反应：检测多个组件外部的点击

1 个答案: