如何從 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>
    )

}