Global events and component's local state

Question

So I have a component, and let's say when I click on it this should trigger a state change, e.g.:

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

now, what If I want to "deactivate" it when clicked anywhere on the document? I guess I could just use addEventListener by hooking it up onto the document object, something like this:

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

now this does what I want, but first of all if I have 200 instances of the same component it will have 200 event listeners, right? Which is not desirable but ok, I guess

The real question though is how do I distinguish one instance of the component from another when setting its state? I definitely don't want all of them to be "deactivated", but only the one in which context that click event handler is being triggered

Answer 1

I think the title of the question points to the real problem: global events affecting local state. It sounds to me like the notion of being "activated" doesn't belong to each of these components (as local state), but to something higher in the tree. Otherwise, they'd function independently. But it sounds to me like you want one of these to be activated at a time, correct?

I'd identify the currently active one either in a parent's local state or in global app state. Then I'd have the parent hand each child a callback it can call when it's clicked to activate it. Lastly, the parent can have a single click event listener on its element, presumably an element which covers the entire page, which deactivates the active child (by setting the active child to nil wherever it's being stored).