Route ändern onClick div react

Ich muss eine Navigationskomponente in React in ein div einbinden, das als Link/a fungiert (Ich habe eine <a></a> im nav-Element bereits verschachtelt und kann eine weitere <a></a> darin verschachteln. route den Benutzer auf eine neue Route bei Klick auf diese äußerste Div, die als Wrapper fungiert.Ich habe mehrere Navigationsabschnitte und möchte so etwas wie eine onClick={this.handleNavClick(newRoute)} verwenden, aber habe keinen Erfolg.Ich bin Konsole Protokollierung der richtigen LinkPath, aber nichts geschieht auf KlickRoute ändern onClick div react

Hier ist meine Funktion ist.

handleNavClick(linkPath) { 
    console.log(linkPath) 
    let currentPath = window.location.pathname; 
    currentPath = window.location.linkPath; 
    },

Hier ist eine Prüfung ple von mir versucht, von einem nav Abschnitt erneut Route:

getNavItem() { 
     const currentPath = window.location.pathname; 
     const reportPath = "/reporting"; 

     return (
      <div onClick={this.handleNavClick(dashboardsPath)}> 
      <li id="nav-item-view" className={ classNames({"active": currentPath === reportPath}, "sidebar-item")}> 
       <div className="active-carat"></div> 
      </li> 
      </div> 
     ); 
     },

Quelle

2017-07-27 sftaco

Sie sollten so etwas wie dies versuchen:

onClick={() => {this.handleNavClick(dashboardsPath)}}

Quelle

2017-07-27 21:56:49

Ich würde empfehlen, [gegen diesen obwohl] (https://stackoverflow.com/questions/36677733/why-jsx-props-should-not-use -Pfeil-Funktionen) – Ezz

@Ezz ja, du hast Recht. Aber Facebook bestätigt diese Methode in seiner Dokumentation. https://facebook.github.io/react/docs/handling-events.html also ist es in Ordnung, wenn wir keine Probleme mit der Leistung haben. –

Dies liegt daran, onClick eine Funktion übernimmt, aber hier sind Sie das Ergebnis einer Funktion übergeben.

Sie können so etwas wie dieses

getNavItem() { 
    const currentPath = window.location.pathname; 
    const reportPath = "/reporting"; 

    const handleNavClick =() => { 
     let currentPath = window.location.pathname; 
     currentPath = dashboardPath; 
    }; 

    return (
     <div onClick={handleNavClick}> 
     <li id="nav-item-view" className={ classNames({"active": currentPath === reportPath}, "sidebar-item")}> 
      <div className="active-carat"></div> 
     </li> 
     </div> 
    ); 
    },

tun aber ich einen Handler zu schaffen vermeiden würde auf jeden aus Leistungsgründen machen. Sie sollten stattdessen eine NavItem-Komponente mit ihrer eigenen handleNavClick-Methode und dashboardPath Prop erstellen.

Quelle

2017-07-27 21:54:11 Ezz

Route ändern onClick div react

Antwort

Verwandte Themen