import React from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import DashboardIcon from '@material-ui/icons/Dashboard';
import IconButton from '@material-ui/core/IconButton';
import {Link} from 'react-router-dom';
import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
anchorEl: null
};
}
handleClick(event) {
console.log(event);
console.log(this);
this.setState({
anchorEl: event.currentTarget,
});
}
handleClose() {
console.log(342);
this.setState({
anchorEl: null,
});
}
render() {
return (
<AppBar position="static">
<Toolbar>
<IconButton edge="start" color="inherit" aria-label="menu">
<DashboardIcon />
</IconButton>
<Button color="inherit">
<Link to="/home" className="menu-link">
首页
</Link>
</Button>
<Button color="inherit" onClick={this.handleClick}>
<Link to="/home" className="menu-link">
内容管理
</Link>
</Button>
<Menu
id="simple-menu"
anchorEl={this.anchorEl}
keepMounted
open={Boolean(this.anchorEl)}
onClose={this.handleClose}
>
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
<MenuItem onClick={this.handleClose}>My account</MenuItem>
<MenuItem onClick={this.handleClose}>Logout</MenuItem>
</Menu>
</Toolbar>
</AppBar>
);
}
}
export default Header;
代码如上,Header
里面的 handleClick 函数,this 提示undefined
,我之前按照官方示例学的时候,onClick 绑定的class
函数的this
是有的,可以使用this.setState
的,怎么到了这里就不行了呢?
这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。
V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。
V2EX is a community of developers, designers and creative people.