当单击菜单以外的任何地方时，ReactJS关闭下拉菜单

Question

我有：

public allData = () => {
  // "this" will be the expected object here
}

DropdownMenu.js

constructor(props) {
        super(props);

        this.state = {
            activeDropdown: null,
            mouseInDropdown: false,
...

<div className="filter_container">
                    <DropdownMenu text="New" count={127} disabled/>
                    <DropdownMenu text="Only show" isOpen={this.state.activeDropdown === "Only_show"} onClick={() => this.setState({ activeDropdown: "Only_show"})} onMouseEnter={() => this.setState({ mouseInDropdown: true })} onMouseLeave={() => this.setState({ mouseInDropdown: false })}>
                        <li>New</li>
                        <li>Old</li>
                    </DropdownMenu>
                    <DropdownMenu text="item select" isOpen={this.state.activeDropdown === "item_select"} onClick={() => this.setState({ activeDropdown: "item_select"})} onMouseEnter={() => this.setState({ mouseInDropdown: true })} onMouseLeave={() => this.setState({ mouseInDropdown: false })}>
                        <li>K</li>
                        <li>U</li>
                    </DropdownMenu>
                    <DropdownMenu text="Sort by"  isOpen={this.state.activeDropdown === "Sort_by"} onClick={() => this.setState({ activeDropdown: "Sort_by"})} onMouseEnter={() => this.setState({ mouseInDropdown: true })} onMouseLeave={() => this.setState({ mouseInDropdown: false })}>
                        <li>Name</li>
                        <li>Age</li>
                        <li>Value</li>
                    </DropdownMenu>

如何做到这一点，以便在菜单内以外的任何地方单击时，当前打开的菜单会关闭？