如何从 React 组件中向 BODY 添加点击处理程序？

Question

我正在构建一个下拉菜单 React 组件，当用户单击组件外部DOM 中的任何位置时，该组件应该关闭。

使用 jQuery，我通常会在下拉菜单打开时向body添加一个事件侦听器，并在下拉菜单关闭时再次将其删除。 （事件侦听器本身关闭下拉菜单——组件内的任何点击事件都不会传播，以防止主体点击处理程序被触发。）

有没有办法从 React 组件中将侦听器附加到body元素？ 还是我应该只使用 jQuery？ （我有点担心混合 React 和 jQuery。）

Answer 1

React 只是 JavaScript，因此可以通过使用addEventListener()像往常一样将点击处理程序附加到任何元素。 在componentDidMount执行此操作通常非常好且整洁，并通过删除添加的事件处理程序在componentWillUnmount进行清理。

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

使用基于函数的组件是有帮助的：

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

}