Ich habe eine Seitenleisten-Komponente erstellt und ihren Status auf false gesetzt, um den Block auszublenden, bis ein Benutzer auf das Hanmburger-Symbol klickt. Dann wird der Status angezeigt. Ich versuche jedoch zurückzukehren (oder das Seitenleistenmenü zu schließen), wenn der Benutzer auf das Symbol zum Schließen von "X" klickt. Ich habe eine hideMenu-Methode geschrieben, um den Status auf false zurückzusetzen, aber es funktioniert nicht, und es gibt keine Fehler. Folgendes habe ich geschrieben

class SubMainNavbar extends React.Component{
  constructor(){
    super();
    this.state = {isShown:false}
    this.showMenu = this.showMenu.bind(this)
    this.hideMenu = this.hideMenu.bind(this)
  }

  showMenu(){
    this.setState({isShown: true})
  }

  hideMenu(){
   this.setState({isShown: false})
  }
  render() {
    return (
      <div className="sub-flex-container">
        <div className="co pt-4">
      <ul className="flex-container sub-list">
        <li>women</li>
        <li>mens</li>
        <li>health & beauty</li>
      </ul>
      <span onClick={this.showMenu} className="pl-3 hamburger hide-big pb-4"><Icon type="menu" />
      <div className="mobile-menu-display" id="mySidebar" style={{display: this.state.isShown ? 'block' : 'none' }}>
        <span onClick={this.hideMenu} className="float-right font-weight-bold hide-big close">X</span>
      </div>
      </span>

    </div> 

    <div className="co">
    {/* <a href=""><Logo className="logo" /></a> */}
    <a href=""><img className="img-fluid logo" src={Logo} alt="losode logo"/></a>
    </div>

    <div className="co pt-4">
    <span className="hide-small"><SearchInput /></span>
    <div className="icon-mobile hide-big">
      <ul className="flex-icon sub-flex-container">
        <li><ion-icon name="search-outline"></ion-icon></li>
        <li><ion-icon name="person-outline"></ion-icon></li>
      <li><ion-icon name="basket-outline"></ion-icon></li>
      </ul>
    </div> 
    </div>

    </div>
    );
  }
};

export default SubMainNavbar
2
Iamlimo 19 Feb. 2020 im 13:04

3 Antworten

Beste Antwort

Sie haben Ihr tags nicht richtig geschlossen. Aktualisieren Sie Ihren Code wie folgt:

  <div className="sub-flex-container">
        <div className="co pt-4">
      <ul className="flex-container sub-list">
        <li>women</li>
        <li>mens</li>
        <li>health & beauty</li>
      </ul>
      <span onClick={this.showMenu} className="pl-3 hamburger hide-big pb-4"><Icon type="menu" /></span>
      <div className="mobile-menu-display" id="mySidebar" style={{display: this.state.isShown ? 'block' : 'none' }}>
        <span onClick={this.hideMenu} className="float-right font-weight-bold hide-big close">X</span>
      </div>
      </div>


    <div className="co">
...
3
waqas Mumtaz 19 Feb. 2020 im 10:28

Sie müssen sicherstellen, dass das Ereignis nicht erneut an den äußeren Container übergeben wird. In Ihrem Fall wird das Ereignis durch das innere Element ausgelöst, das zu einem hideMenu führt. Anschließend wird das Ereignis an den äußeren Container weitergegeben, was zu einem Rückruf von showMenu führt.

Weitere Informationen zum finden Sie hier: https://developer.mozilla.org/en-US/ docs / Web / API / Event / stopPropagation https://www.w3schools.com/jsref/event_stoppropagation.asp

Scheint, als hätte Padi Dev das Problem auch vor mir gefunden :)

0
Kevin H. 19 Feb. 2020 im 10:39

Ihre Spanne, auf die Sie klicken, um das Menü auszublenden, befindet sich innerhalb der Spanne, wodurch die Funktion showMenu ausgelöst wird. Sie müssen die Funktion hideMenu mit dem Ereignisparameter aufrufen und die Funktion stopPropagation in Ihrer Funktion hideMenu verwenden, bevor Sie den Status festlegen. Das Klicken der äußeren Spanne wird also nicht ausgelöst, und nur die innere Spanne erhält den Klick.

class SubMainNavbar extends React.Component{
  constructor(){
    super();
    this.state = {isShown:false}
    this.showMenu = this.showMenu.bind(this)
    this.hideMenu = this.hideMenu.bind(this)
  }

  showMenu(){
    this.setState({isShown: true})
  }

  hideMenu(event){
   event.stopPropagation()
   this.setState({isShown: false})
  }
  render() {
    return (
      <div className="sub-flex-container">
        <div className="co pt-4">
      <ul className="flex-container sub-list">
        <li>women</li>
        <li>mens</li>
        <li>health & beauty</li>
      </ul>
      <span onClick={this.showMenu} className="pl-3 hamburger hide-big pb-4"><Icon type="menu" />
        <div className="mobile-menu-display" id="mySidebar" style={{display: this.state.isShown ? 'block' : 'none' }}>
          <span onClick={event => this.hideMenu(event)} className="float-right font-weight-bold hide-big close">X</span>
        </div>
      </span>

    </div> 

    <div className="co">
    {/* <a href=""><Logo className="logo" /></a> */}
    <a href=""><img className="img-fluid logo" src={Logo} alt="losode logo"/></a>
    </div>

    <div className="co pt-4">
    <span className="hide-small"><SearchInput /></span>
    <div className="icon-mobile hide-big">
      <ul className="flex-icon sub-flex-container">
        <li><ion-icon name="search-outline"></ion-icon></li>
        <li><ion-icon name="person-outline"></ion-icon></li>
      <li><ion-icon name="basket-outline"></ion-icon></li>
      </ul>
    </div> 
    </div>

    </div>
    );
  }
};

export default SubMainNavbar

Ps: Sie können Pfeilfunktionen verwenden, sodass Sie keinen Konstruktor verwenden müssen.

Beispielsweise:

  this.state = { isShown: false }


  showMenu = () => {
    this.setState({isShown: true})
  }

  hideMenu = event => {
   event.stopPropagation()
   this.setState({isShown: false})
  }

1
Padi Dev 19 Feb. 2020 im 10:56