Question

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

如何将导航显示在桌面屏幕上？

以下代码：

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，我会考虑不要像在香草JS中那样添加事件侦听器，而是像这样this.state.displayMenu = !this.state.displayMenu那样使用React的setState来切换打开关闭，它将为状态对象。

虽然我会更深入地研究您如何组织组件。如果您有移动菜单组件，那么我会考虑拥有一个桌面菜单组件，并根据您是否处于移动断点来有条件地呈现每个菜单组件。

如何使导航保持在桌面上？（ReactJS）

1 个答案:

如何使导航保持在桌面上？ （ReactJS）

1 个答案:

如何使导航保持在桌面上？（ReactJS）