material ui React 组件函数里面的 this 未定义是怎么回事？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› React

这是一个创建于 1775 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

4 条回复 • 2020-01-01 21:15:52 +08:00