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

2020-01-01 19:18:55 +08:00
 dyllen
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的,怎么到了这里就不行了呢?

2198 次点击
所在节点    React
4 条回复
shenyu1996
2020-01-01 19:37:02 +08:00
Justin13
2020-01-01 19:40:09 +08:00
上箭头函数,这是 js 中的 this 问题,和 react 没有关系
dyllen
2020-01-01 19:53:28 +08:00
@Justin13 @shenyu1996 知道了,感谢。
newbieRenew
2020-01-01 21:15:52 +08:00
用 function 吧,hook,箭头函数。少了很多 this 烦恼。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/634214

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX