Reactのボタンを押して要素を切り替える方法は？

Question

3つの奇妙な日を検索して、自分のモバイルメニューを切り替えるためにモバイルナビゲーションボタンを切り替える方法を見つけました。私はReactを初めて使う人で、jQueryでこれを簡単に実行できますが、jQueryを使いたくありません。私は行を表示するか、または要素を非表示にする方法で発見した例をコピーした行があります。私はそれを働かせることはできません。どんな助けでも大歓迎です。 Reactでスタイル付きコンポーネントを使用しています。

ボタンサブコンポーネント：

import React, { Component } from 'react'; 

class MenuButton extends Component { 
    render() { 
    return (
     <Button onClick={this.props.toggleMenu}> 
     <Menu></Menu> 
     </Button> 
    ) 
    } 
} 

export default MenuButton; 

メニューのサブコンポーネント：すべての状態と

import React, { Component } from 'react'; 

import { Link } from 'react-router-dom'; 

class Menu extends Component { 
    render() { 
    return (
     <OffCanvasMenu> 
     <Title>Menu</Title> 
     <Nav> 
      <NavLinks><Link to='/'>Home</Link></NavLinks> 
      <NavLinks><Link to='/about'>About</Link></NavLinks> 
      <NavLinks><Link to='/interactive'>Interactive</Link></NavLinks> 
      <NavLinks><Link to='/ideas'>Ideas</Link></NavLinks> 
      <NavLinks><Link to='/contact'>Contact</Link></NavLinks> 
     </Nav> 
     </OffCanvasMenu> 
    ) 
    } 
} 

export default Menu; 

メニューコンテナコンポーネント：

import React, { Component } from 'react'; 

import Menu from './Menu'; 
import MenuButton from './MenuButton'; 

class MenuContainer extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     active: false 
    } 
    this.toggleMenu = this.toggleMenu.bind(this); 
    } 

    toggleMenu() { 
    const { active } = this.state; 
    this.setState({ 
     //toggle value of `active` 
     active: !active 
    }); 
    } 

    render() { 
    return (
     <div> 
     <MenuButton onClick={this.toggleMenu}/> 
     {this.state.active && <Menu/>} 
     </div> 
    ) 
    } 
} 

export default MenuContainer; 

私はReactDevのチェックボックスを見ることができますMenuContainerには状態が表示されていますが、ボタンをクリックすると状態は切り替わりません。

Answer 1

onClickは、MenuButtonコンポーネントによって処理され、コンポーネントは、toggleMenu関数を呼び出してプロパティとして渡されます。私はMenuButtonのプロパティとしてtoggleMenuを渡します

<MenuButton toggleMenu={this.toggleMenu} />