I am building a pulldown menu React component that should close when the user clicks anywhere in the DOM outside of the component.
Using jQuery I would typically add an event listener to the body
when the pulldown is opened, and remove it again when the pulldown is closed. (The event listener itself closes the pulldown – any click events within the component are not propagated to prevent the body click handler from firing.)
Is there any way to attach a listener to the body
element from within a React component? Or should I just use jQuery? (I'm a bit wary of mixing React and jQuery.)
Best Answer
React is just JavaScript so attaching a click handler to any element is done as normal by using
addEventListener()
. Doing this incomponentDidMount
is normally very nice and tidy and clean up after yourself incomponentWillUnmount
by removing the added event handler.