Cliquez sur "menu hamburger" et ouvrez un nav latéral dans React?

Question

Je suis nouveau à réagir. Essayer de comprendre comment lier un événement click et le faire basculer d'une classe à deux endroits. Comment puis-je y parvenir?

Voici ce que j'ai fait jusqu'ici.

Le nav:

import React from 'react'; 
import { css } from 'glamor'; 
import { container } from '../contents/grid' 

export default class Navigation extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = { isToggled: true }; 
     this.handleClick = this.handleClick.bind(this); 
    } 

    handleClick() { 
     this.setState(prevState => ({ 
      isToggled: !prevState.isToggled 
     })); 
    } 

    showHeader() { 
     this.refs.navigation.show(); 
    } 

    render() { 
     return (
      <nav className={nav} {...container}> 
       <ul {...hamburger} className={this.state.isToggled ? "" : "active"} onClick={this.handleClick}> 
        <li> 
        </li> 
       </ul> 
      </nav> 
     ) 
    } 
} 

Et le menu latéral/tête:

import React from 'react'; 
import { Link } from 'react-router-dom'; 
import { css } from 'glamor'; 
import { header, nav, navUL } from '../contents/navigation'; 

export default class Header extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    show() { 
     this.setState({ 
      isToggled: true 
     }); 
    } 

    render() { 
     return (
      <header {...header}> 
       <nav {...nav}> 
        <ul {...navUL} className={styleUl}> 
         <li> 
          <Link to='/'>Robin Savemark</Link> 
         </li> 
         <li> 
          <Link to='/experience'>Erfarenhet</Link> 
         </li> 
         <li> 
          <Link to='/education'>Utbildning</Link> 
         </li> 
         <li> 
          <Link to='/project'>Projekt</Link> 
         </li> 
         <li> 
          <Link to='/knowledge'>Kunskaper</Link> 
         </li> 
         <li> 
          <Link to='/contact'>Kontakt</Link> 
         </li> 
        </ul> 
       </nav> 
      </header> 
     ) 
    } 
} 

Et l'App où je rends que chaque composant:

import React from 'react'; 
import Navigation from './Navigation'; 
import Header from './Header'; 
import Main from './Main'; 

export default class App extends React.Component { 
    render() { 
     return (
      <div> 
       <Navigation /> 
       <Header ref="Navigation" /> 
       <Main /> 
      </div> 
     ) 
    } 
} 

Comment puis-je dire à mon "handleClick" méthode pour "bascule" le menu hamburger et le menu en-tête/side-menu? Parce que le handleClick est à l'intérieur d'une autre portée (Navigation) et je ne veux pas faire la même chose dans la classe Header.

Answer 1

Si vous voulez deux composants pour partager le même événement/état, vous devez faire ce que REACT docs désignent comme état de levage jusqu'à

Vous pouvez structurer mais vous s'il vous plaît, mais en ce moment, votre App.js détient vos deux composants d'intérêt, mais n'a pas de state propre. Par conséquent, ces deux composants ne peuvent en aucun cas partager l'état. Qu'est-ce que vous voulez faire est d'avoir un gestionnaire d'événements au App.js que vous transmettez ensuite au composant (s) d'intérêt comme un accessoire, ainsi que d'avoir une classe toggle contenue dans son propre état.

Une fois que vous déclenchez le function transmis à Navigation, il dira App.js « hey, je viens de faire cette chose que vous me dit de le faire, vous le manipuler d'ici. » App.js dira "ok, mise à jour de l'état pour moi-même afin que vous et Header pouvez obtenir ce dont vous avez besoin." App.js va basculer son état, et passer cela comme un accessoire vers le bas à la fois Header et Navigation.

React référence doc ici: https://facebook.github.io/react/docs/lifting-state-up.html#lifting-state-up