时间戳

首页 > 解决方案 > ReactJS 下拉菜单，在打开当前菜单之前关闭其他菜单

javascript - ReactJS 下拉菜单，在打开当前菜单之前关闭其他菜单

问题描述

我做了一些下拉菜单：

export default class DropdownMenu extends Component {

    constructor(props) {
        super(props)

        this.state = {
            menuOpen: false,
            highlight: false,
            count: this.props.count | 0
        }
        this.showDropdown = this.showDropdown.bind(this);
    }

    componentDidMount() {

    }

    showDropdown() {
            this.setState({
                menuOpen: !this.state.menuOpen
            });
    }

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

问题是您可以打开所有这些并让它们保持打开状态，直到您再次单击它们以关闭它们。如果打开另一个菜单，我如何使它关闭任何其他打开的菜单？

这是它们的实现位置：

render() {
        ...
                <div className="filter_container">
                    <DropdownMenu text="New" count={127} disabled/>
                    <DropdownMenu text="Only show">
                        <li>New</li>
                        <li>Old</li>
                    </DropdownMenu>
                    <DropdownMenu text="Other">
                        <li>one</li>
                        <li>two</li>
                    </DropdownMenu>
                    <DropdownMenu text="Sort by">
                        <li>Name</li>
                        <li>Age</li>
                        <li>Value</li>
                    </DropdownMenu>
                </div>
            </div>
...

标签： javascriptreactjs

解决方案

你可以玩，onBlur因为当另一个被点击时它会失去焦点。

class DropDown extends React.Component {
  state = {
    isVisible: false
  }
  
  closeMenu = () => {
    this.setState({ isVisible: false })
  }
  
  toggleMenu = () => {
    this.setState(prevState => ({ isVisible: !prevState.isVisible }))
  }
  
  render() {
    const { isVisible } = this.state;
    return (
      <div
        className="dropdown__menu"
        onBlur={this.closeMenu}
        tabIndex={0}
        role="menu"
        onClick={this.toggleMenu}>
        {isVisible ? 'visible' : 'hidden'}
      </div>
    )
  }
}


const App = () => (
  <div>
     <DropDown />
     <DropDown />
  </div>
)
 

ReactDOM.render(<App />, document.getElementById('root'));
.dropdown__menu {
  outline: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

推荐阅读