Глобальные события и локальное состояние компонента

Question

Итак, у меня есть компонент, и, скажем, когда я нажимаю на него, это должно вызвать изменение состояния, например:

:on-click #(om/set-state! this {:activated? true})

что делать, если я хочу "деактивировать" его при нажатии в любом месте документа? Я думаю, я мог бы просто использовать addEventListener подключив его на document объект, что-то вроде этого:

(componentDidMount [this]
       (events/listen (gdom/getDocument)
         (.-CLICK events/EventType)
         #(om/set-state! this {:activated? false}) true))

теперь это делает то, что я хочу, но прежде всего, если у меня есть 200 экземпляров одного и того же компонента, у него будет 200 прослушивателей событий, верно? Что нежелательно, но хорошо, я думаю

Реальный вопрос, однако, заключается в том, как отличить один экземпляр компонента от другого при настройке его состояния? Я определенно не хочу, чтобы все они были "деактивированы", а только тот, в контексте которого запускается этот обработчик события нажатия.

Answer 1

Я думаю, что название вопроса указывает на реальную проблему: глобальные события, влияющие на местное состояние. Мне кажется, что понятие "активация" относится не к каждому из этих компонентов (как к локальному состоянию), а к чему-то более высокому в дереве. В противном случае они бы функционировали независимо. Но для меня это звучит так, будто вы хотите, чтобы один из них активировался одновременно, верно?

Я бы идентифицировал активный в данный момент либо в локальном состоянии родителя, либо в глобальном состоянии приложения. Тогда я бы попросил каждого родителя передать ответный вызов, который он может вызвать, когда щелкнет его, чтобы активировать его. Наконец, родительский элемент может иметь прослушиватель событий одного щелчка на своем элементе, предположительно элемент, который покрывает всю страницу, который деактивирует активного дочернего элемента (путем установки активного дочернего элемента в nil где бы он ни хранился)