What is Uncaught TypeError: Cannot read property 'open' of undefined for AppBar + Drawer component (ReactJS + Material-UI)?

本小妞迷上赌 提交于 2019-12-23 03:17:17

问题


I am attempting to get the navigation, default hamburger icon on the left of AppBar ( http://www.material-ui.com/#/components/app-bar ) from Material-UI framework to slide open the Drawer component when clicked ( http://www.material-ui.com/#/components/drawer ). But once clicked, I am getting the following error and I can't see to figure out:

Uncaught TypeError: Cannot read property 'open' of undefined

Any insight or guidance on it would be greatly appreciated. Thank you in advance.

import React, { Component } from 'react'
import { Drawer, AppBar, MenuItem} from 'material-ui'
import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme'
import getMuiTheme from 'material-ui/styles/getMuiTheme'
import { Route, Router } from 'react-router'



export default class Main extends Component  {

  constructor(props, context){
    super(props, context);
    this.state = {open:false};
  }

  getChildContext() {
    return {muiTheme: getMuiTheme(baseTheme)};
  }

  handleToggle() {
    this.setState({open: !this.state.open});
   }

        render() {
            return (
                <div>
                <AppBar   
                  isInitiallyOpen={true} 
                  onLeftIconButtonTouchTap={this.handleToggle}        
                  onLeftIconButtonClick={this.handleToggle} 
                />

                <Drawer
                  docked={false}
                  open={this.state.open}>
                  <MenuItem>Menu Item 1</MenuItem>
                  <MenuItem>Menu Item 2</MenuItem>
                  <MenuItem>Menu Item 3</MenuItem>
                </Drawer>
                </div>
            );
        }
    }

export default Main;

来源:https://stackoverflow.com/questions/37357512/what-is-uncaught-typeerror-cannot-read-property-open-of-undefined-for-appbar

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!