reactjs - Global events and component's local state -

so have component, , let's when click on should trigger state change, e.g.:

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

now, if want "deactivate" when clicked anywhere on document? guess use addeventlistener hooking onto document object, this:

(componentdidmount [this]        (events/listen (gdom/getdocument)          (.-click events/eventtype)          #(om/set-state! {:activated? false}) true)) 

now want, first of if have 200 instances of same component have 200 event listeners, right? which not desirable ok, guess

the real question though how distinguish 1 instance of component when setting state? don't want of them "deactivated", 1 in context click event handler being triggered

i think title of question points real problem: global events affecting local state. sounds me notion of being "activated" doesn't belong each of these components (as local state), higher in tree. otherwise, they'd function independently. sounds me want 1 of these activated @ time, correct?

i'd identify active 1 either in parent's local state or in global app state. i'd have parent hand each child callback can call when it's clicked activate it. lastly, parent can have single click event listener on element, presumably element covers entire page, deactivates active child (by setting active child nil wherever it's being stored).