陣營切換菜單

Question

林試圖建立從這個例子的切換右鍵菜單：how-to-build-a-sliding-menu-using-react-js"

問題React.createClass已被棄用，所以我不得不改變代碼，並停止工作，我得到的內容，但不能訪問處理程序cann有人告訴我，我應該採取哪些步驟來解決這個問題！所以，如果我在我的按鈕點擊我得到這個錯誤：

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

菜單

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

菜單項

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

的問題是，你是this.right分配的參考，您需要更新showRight方法是這樣的：

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

我也想用一個箭頭的功能，以避免在結合功能構造函數。

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

並且確保使用PureComponent以避免在不需要時渲染組件。

編輯：

的Menu類是沒有反應的方式，如果你想隱藏你應該做的事情如下所示的元素：

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

如果visible === true那麼div將呈現，否則不會。我刪除了聽衆，我們沒有這樣做，相反，您需要定義一個onClick回調的元素，您希望用戶點擊以隱藏菜單。