ReactJs bascule Bouton pour ouvrir le menu

Question

Je construis un menu à bascule React qui est déclenché par un bouton le problème est que ceci est arrivé une fois donc si j'appuie à nouveau sur le bouton le menu est toujours ouvert au lieu de fermer. Je devrais inclure la fonction cacher, mais je sais vraiment comment. ? Peut-il me dire ce que je dois changer je l'ai utilisé cet exemple How to Build a Sliding Menu Using ReactJS

Import { Menu } from '../../components'; 

export default class ToggleMenu extends React.Component { 

    showRight =() => { 
    this.right.show(); 
    } 


    constructor(props) { 
    super(props); 
    this.showRight = this.showRight.bind(this); 
    } 

    render() { 

    return (
     <div> 
     <button onClick={this.showRight}>Show Right Menu!</button> 
     <Menu ref={right => this.right = right} alignment="right"> 
     <MenuItem hash="first-page">First Page</MenuItem> 
     <MenuItem hash="second-page">Second Page</MenuItem> 
     <MenuItem hash="third-page">Third Page</MenuItem> 
     </Menu> 
     </div> 
    ); 
    } 
} 

importation React de « réagir »;

export default class Menu extends React.Component { 
    state = { 
     visible: false, 
    }; 

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

    hide() { 
     this.setState({ visible: false }); 
    } 

    render() { 
     const { visible } = this.state; 

     return (
     <div className="menu"> 
      { 
      visible && 
       <div className={this.props.alignment}>{this.props.children}</div> 
      } 
     </div> 
    ); 
    } 
} 

Answer 1

En déplaçant l'Etat dans la principale ToggleMenu, vous pouvez avoir cette composante maintenir la visibilité du menu.

class ToggleMenu extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      visible: false 
     }; 

     this.toggleMenu = this.toggleMenu.bind(this); 
    } 

    toggleMenu() { 
     this.setState({visible: !this.state.visible}) 
    } 

    render() { 
     return (
      <div> 
       <button onClick={this.toggleMenu}>Show Right Menu!</button> 
       {this.state.visible && <Menu alignment="right"> 
       <MenuItem hash="first-page">First Page</MenuItem> 
       <MenuItem hash="second-page">Second Page</MenuItem> 
       <MenuItem hash="third-page">Third Page</MenuItem> 
       </Menu>} 
      </div> 
     ); 
    } 
} 

Cela m'a permis de changer votre menu dans un composant Stateless:

const Menu = ({alignment, children}) => (
    <div className="menu"> 
     <div className={alignment}>{children}</div> 
    </div> 
); 

J'ai créé un webpackbin ici (maintenant avec animation): https://www.webpackbin.com/bins/-Klh1VM-n4RDCkEbkK67

Pour les transitions et l'animation, je vous recommande vous regardez https://github.com/reactjs/react-transition-group

Answer 2

Ajoutez un eventListener à votre bouton.

//Add ID to the button 
<button id = "toggle"></button> 

//Outside the render method 
    document.getElementById('toggle').addEventListener('click', function(e){ 
    If(e.target.style.display="none") { 
     this.right.show() 
    } Else { 
     this.right.hide() 
    } 

})

Answer 3

export default class ToggleMenu extends React.Component { 

    constructor(props) { 
    super(props); 
    this.state = { rightMenu: false } 
    this.showRight = this.showRight.bind(this); 
    } 

    showRight =() => { 
    this.setState({ rightMenu: !this.state.rightMenu }) 
    } 

    render() { 

    return (
     <div> 
     <button onClick={this.showRight}>Show Right Menu!</button> 
     <Menu className={ this.state.rightMenu ? "displayBlock" : "displayNone"} ref={right => this.right = right} alignment="right"> 
     <MenuItem hash="first-page">First Page</MenuItem> 
     <MenuItem hash="second-page">Second Page</MenuItem> 
     <MenuItem hash="third-page">Third Page</MenuItem> 
     </Menu> 
     </div> 
    ); 
    } 
} 

//Style code 
.displayBlock{ display: block } 
.displayNone{ display: none}