ReactJs toggle Button zum öffnen Menu

Question

ich baue ein react toggle menü welches durch einen knopf ausgelöst wird das problem ist das ist einmal passiert also wenn ich den knopf wieder drücke ist das menü immer noch offen anstatt zu schließen. Ich sollte die Verstecken-Funktion einschließen, aber weiß wirklich nicht wie. ? Kann mir jemand sagen, was ich ändern soll habe ich es aus diesem Beispiel 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> 
    ); 
    } 
} 

Import Reagieren von ‚reagieren‘;

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

durch den Staat in den Haupt ToggleMenu bewegen, können Sie diese Komponente haben, die Sichtbarkeit des Menüs zu erhalten.

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

Das erlaubte mir, Ihr Menü in einem Stateless-Komponente zu ändern:

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

ich webpackbin hier geschaffen haben (jetzt mit Animation): https://www.webpackbin.com/bins/-Klh1VM-n4RDCkEbkK67

Für Übergänge und Animationen, empfehle ich Sie sehen https://github.com/reactjs/react-transition-group

Answer 2

Fügen Sie einen eventListener zu Ihrer Schaltfläche hinzu.

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