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

Question

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

使用jQuery我通常会body在打开下拉菜单时添加一个事件监听器,并在下拉菜单关闭时再次将其删除.(事件监听器本身关闭下拉-任何点击事件中,该成分不会传播到防止身体单击处理烧制而成)

有没有办法body从React组件中将侦听器附加到元素？或者我应该只使用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>
    )

}