ReactJs le Bouton à bascule pour ouvrir le Menu

- je construire une Réagir la bascule de menu qui est déclenché par un bouton, le problème est que c'est arrivé une fois, donc si j'ai frappé à nouveau le bouton du menu encore ouverts, au lieu de fermer. je devrais inclure la fonction masquer mais ne savent vraiment comment. quelqu'un peut-il me dire ce que je dois changer?Je l'ai utilisé à partir de cet exemple Comment Construire un Glissement de Menu à l'Aide de 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 de Réagir à partir 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>
      );
    }
}

InformationsquelleAutor Alex | 2017-06-03

Par le déplacement de l'Etat dans le principal ToggleMenu, vous pouvez avoir cette composante de 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 modifier votre menu dans un Apatride Composant:

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

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

Pour les transitions et les animations, je vous recommande de regarder https://github.com/reactjs/react-transition-group

u peut peut-être me dire comment je peux animer le menu. le problème est que le menu est juste rendu après sur cliquez sur. un simple opacité de 0,1 à 1 serait bien que j'ai essayé toute la journée pour gérer ce problème. @user2340824
Pas de problèmes! J'ai mis à jour mon exemple avec certaines transitions 😉
u sont géniaux, j'ai essayé hier de toute la journée pour animer ce genre de choses xD

InformationsquelleAutor user2340824

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}

InformationsquelleAutor S.M. Shakil

-2

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

})

J'ai déjà un état dans mon Menu tiens à le manipuler en cours et ur solution n'est pas de cette façon, comment réagir attendre et il ne fonctionne pas.

InformationsquelleAutor Jonathan Bartlett

Vous devez vous connecter pour publier un commentaire.