Реагировать: обнаружение щелчка за пределами нескольких компонентов

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. И это работает для определенного вами варианта использования.

То есть, в обработчике onClick компонента Box вы называете preventDefault, а в обработчике handleClickOutside вы проверяете, является ли e.defaultPrevented true.

Вот ссылка на кодовый ящик: https://codesandbox.io/s/headless-wind-tr1ns

---

Также, если вы можете использовать ref для компонента Box. Вы можете прочитать этот ответ: Как открывать и закрывать раскрывающийся список при нажатии btn, но в то же время при закрытом нажатии снаружи?

Надеюсь, это поможет!

Ищетелучший ответ, а также. Спасибо:)