![](/img/trans.png)
[英]ReactJS -> Material-UI Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
[英]What is Uncaught TypeError: Cannot read property 'open' of undefined for AppBar + Drawer component (ReactJS + Material-UI)?
我正在嘗試從 Material-UI 框架中獲取導航、AppBar( http://www.material-ui.com/#/components/app-bar )左側的默認漢堡圖標,以在單擊時滑動打開 Drawer 組件( http://www.material-ui.com/#/components/drawer )。 但是一旦點擊,我就會收到以下錯誤,我無法弄清楚:
未捕獲的類型錯誤:無法讀取未定義的屬性“打開”
任何有關它的見解或指導將不勝感激。 提前謝謝你。
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;
您還可以制作功能組件而不是類組件。它將使您的組件清晰易讀 -
import React, { useState } 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 function Main(props) {
let [open, setOpen] = useState(false);
let handleToggle = () => {
setOpen(!open);
}
return (
<div>
<AppBar
isInitiallyOpen={true}
onLeftIconButtonTouchTap={handleToggle}
onLeftIconButtonClick={handleToggle}
/>
<Drawer
docked={false}
open={open}>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
<MenuItem>Menu Item 3</MenuItem>
</Drawer>
</div>
);
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.