如何让导航保持显示在桌面上？ （反应JS）

Question

我创建了一个移动菜单，每次我在桌面上显示导航时它都会消失。我正在使用与为导航链接之一创建下拉列表相同的 JS 效果。我不希望导航在每次单击时消失。

如何让导航出现在桌面屏幕上？

View GIF Link

以下代码：

import React from 'react';
import { Link } from 'react-router-dom';
import Dropdown from '../dropdowns/dropdown.js';
import hamburger from "../images/menu.svg";

class MobileDropdown extends React.Component {

constructor(){
 super();

 this.state = {
       displayMenu: false,
};

  this.showDropdownMenu = this.showDropdownMenu.bind(this);
  this.hideDropdownMenu = this.hideDropdownMenu.bind(this);

};

  showDropdownMenu(event) {
        event.preventDefault();
        this.setState({ displayMenu: true }, () => {
        document.addEventListener('click', this.hideDropdownMenu);
    });
  }

  hideDropdownMenu() {
      this.setState({ displayMenu: false }, () => {
      document.removeEventListener('click', this.hideDropdownMenu);
    });

  }


render() {
    return (
        <div className="FlexContainer NavbarContainer">

                <div className="mobilecontainer LeftNav">
                    <h2 className="BrandName LeftNav mobileboxmenu inline">Kommonplaces</h2>
                    <div className="hamburger inline" onClick={this.showDropdownMenu}><img alt="menubtn" src={hamburger}></img></div>
                </div>
                { this.state.displayMenu ? (

                <> 
                  <ul className="NavBar">
                    <Dropdown/>    
                    <li className="RightNav"><Link to="/">Host Your Space</Link></li>
                    <li className="RightNav"><Link to="/">About Us</Link></li>
                    <li className="RightNav"><Link to="/">Contact Us</Link></li>
                    <li className="RightNav"><Link to="/">Sign Up</Link></li>
                    <li className="RightNav"><Link to="/">Login</Link></li>
                  </ul>
                </>

                ):
              (
            null
          )
        }
       </div>

    );
  }
}

export default MobileDropdown;

Answer 1

这是因为你在showDropdownMenu 方法中有这一行：

document.addEventListener('click', this.hideDropdownMenu)

您似乎想要这样，因此您可以在移动断点中切换菜单的打开和关闭状态。

但问题是，当您转到桌面大小时，虽然您隐藏了按钮，但组件及其点击处理程序仍在 DOM 中。所以当你点击菜单项时就会消失。

相对于您的问题和 React 作为一个整体，我会考虑不要像在 vanilla JS 中那样添加事件侦听器，而是使用 React 的 setState 切换打开关闭，就像 this.state.displayMenu = !this.state.displayMenu 这样将切换状态的真/假值对象。

虽然我会在更大的层面上研究您如何组织组件。如果您有一个移动菜单组件，我会考虑拥有一个桌面菜单组件，并根据您是否处于移动断点有条件地渲染每个组件。