「ハンバーガーメニュー」をクリックし、Reactのサイドナビゲーターを開きますか？

Question

私は新しい反応があります。クリックイベントをバインドして2つの場所でクラスを切り替える方法を理解しようとしています。これをどのように達成するのですか？

これまで私がこれまで行ってきたことは次のとおりです。

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> 
     ) 
    } 
} 

とサイドメニュー/ヘッダ：

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> 
     ) 
    } 
} 

そして、私は唯一の各コンポーネントのレンダリングアプリケーション：

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> 
     ) 
    } 
} 

どのように私は私が言うのですがハンバーガーメニューとヘッダー/サイドメニューを「トグル」するための「handleClick」メソッド？ handleClickは別のスコープ内にあるので（Navigation）、Headerクラスの内部で同じことをすることはできません。

Answer 1

次の2つのコンポーネントが同じイベント/状態を共有したい場合は、あなたがインクルードはドキュメントはあなたが、今しかし、あなたがそれをしてください構築することができますが、アップ

状態を持ち上げると呼ぶに反応何をする必要がありますApp.jsは興味のある2つのコンポーネントを保持していますが、独自のstateはありません。したがって、これら2つのコンポーネントが状態を共有する方法はありません。あなたがしたいのはApp.jsの中にイベントハンドラを持っていて、そのコンポーネントが支柱として関心のあるコンポーネントに渡され、toggleクラスがそれ自身の状態に含まれていることです。

Navigationに引き継がれたfunctionをトリガーすると、App.js「あなたが私に言ったこのことを、あなたはここから処理しました」と伝えます。 App.jsは「大丈夫です。自分自身で状態を更新するので、あなたとHeaderの両方が必要なものを手に入れることができます。 App.jsはその状態をトグルし、これを小道具としてHeaderとNavigationの両方に渡します。

リアクト・ドッグ・リファレンスはこちらhttps://facebook.github.io/react/docs/lifting-state-up.html#lifting-state-up