时间戳

首页 > 解决方案 > 如何让导航保持显示在桌面上？（反应JS）

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

问题描述

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

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

查看 GIF 链接

此代码如下： 

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;

标签： javascriptreactjs

解决方案

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

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

看起来你想要这个，所以你可以在移动断点中切换菜单的打开和关闭状态。

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

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

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

推荐阅读