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的,怎么到了这里就不行了呢?