React bascule Menu

Question

Im essayant de construire un Basculer menu contextuel de cet exemple: how-to-build-a-sliding-menu-using-react-js"

le problème est React.createClass est dépréciée si je dois changer le code et j'arrêter de travailler obtenir le contenu, mais ne peux pas accéder à la les gestionnaires cann personne ne me dire quelles mesures dois-je faire pour résoudre ce problème! Donc, si je clique sur mon bouton je reçois cette erreur:

Uncaught TypeError: Cannot read property 'show' of undefined

ToggleMenu

import React from 'react'; 
import PropTypes from 'prop-types'; 
import classnames from 'classnames'; 
import localStyles from './ToggleMenu.scss'; 
import { themr } from 'react-css-themr'; 
import { Menu } from '../../components'; 
import { MenuItem } from '../../components'; 

@themr('ToggleMenu', localStyles) 

export default class ToggleMenu extends React.Component { 

    showRight() { 
    this.refs.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> 
    ); 
    } 
} 

Menu

import React from 'react'; 

export default class Menu extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      visible: false 
     } 
    }; 

    show() { 
     this.setState({visible: true}); 
     document.addEventListener("click", this.hide.bind(this)); 
    } 

    hide() { 
     this.setState({visible: false}); 
     document.removeEventListener("click", this.hide.bind(this)); 
    } 

    render() { 
     return (
      <div className="menu"> 
       <div className={(this.state.visible ? "visible " : "") + this.props.alignment}>{this.props.children}</div> 
      </div> 
     ); 
    } 
} 

MenuItem

import React from 'react'; 

export default class MenuItem extends React.Component { 
    navigate(hash) { 
     window.location.hash = hash; 
    } 

    render() { 
     return (
      <div className="menu-item" onClick={this.navigate.bind(this, this.props.hash)}>{this.props.children}</div> 
     ); 
    } 
} 

Answer 1

Le problème est que vous assignez la référence à this.right, vous devez mettre à jour la méthode showRight à quelque chose comme ceci:

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

J'utilise également une fonction de flèche pour éviter une liaison de la fonction dans la constructeur.

import React, { PureComponent } from 'react'; 

export default class ToggleMenu extends PureComponent { 

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

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

Et assurez-vous d'utiliser PureComponent pour éviter de rendre le composant lorsque n'est pas nécessaire.

Edit:

La classe Menu n'est pas REACT façon, si vous voulez cacher un élément que vous devriez faire quelque chose comme ce qui suit:

import React from 'react'; 

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

Si visible === true alors le div rendra sinon ça ne le sera pas. J'ai supprimé les écouteurs, nous ne faisons pas cela en réagissant, à la place, vous devez définir un callback onClick sur l'élément que vous voulez que l'utilisateur clique afin de cacher le menu.