0

I have:

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>

DropdownMenu.js

render() {
        return <div className="dropdown__menu" onClick={this.props.onClick}>
            {this.props.text} {this.state.count > 0 ? <b>{this.state.count}</b> : ''}
            <div className="dropdown__content" style={this.props.isOpen ? {'display': 'block'} : {'display': 'none'}} onMouseEnter={this.props.onMouseEnter} onMouseLeave={this.props.onMouseLeave}>
                {this.props.children}
            </div>
        </div>
    }

How do I make it so that if I click anywhere but inside the menu, the currently open menu closes?

imperium2335
  • 23,402
  • 38
  • 111
  • 190

0 Answers0