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

Question

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 1

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>;
    }
});

Answer 2

It's help who used function based components:

import React, { useEffect  } from 'react';

const ZSideBar = (props) => {

    useEffect(() => {
        document.body.addEventListener('click', closeSidemenu );

        return function cleanup() {
            window.removeEventListener('click', closeSidemenu );
        } 
    },[]);
    let closeSidemenu = () => {
        document.getElementById("sidebar-tree").style.left = "-310px";
    }
   
    return (
        <div></div>
    )

}