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

}

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

2 个答案: