Tim Tim - 4 months ago 33
React JSX Question

How can I add a click handler to BODY from within a React component?

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.)

Answer

React is just JavaScript so attaching a click handler to any element is done as normal by using addEventListener(). Doing this in componentDidMount is normally very nice and tidy and clean up after yourself in componentWillUnmount by removing the added event handler.

var Component = React.createClass({
    componentDidMount: function () {
        document.body.addEventListener('click', this.myHandler);
    },
    componentWillUnmount: function () {
        document.body.removeEventListener('click', this.myHandler);
    },
    myHandler: function () {
        alert('click');
    },
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});