V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
dyllen
V2EX  ›  React

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

  •  
  •   dyllen · 2020-01-01 19:18:55 +08:00 · 2177 次点击
    这是一个创建于 1548 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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
    shenyu1996
        1
    shenyu1996  
       2020-01-01 19:37:02 +08:00 via Android   ❤️ 1
    Justin13
        2
    Justin13  
       2020-01-01 19:40:09 +08:00 via Android   ❤️ 1
    上箭头函数,这是 js 中的 this 问题,和 react 没有关系
    dyllen
        3
    dyllen  
    OP
       2020-01-01 19:53:28 +08:00
    @Justin13 @shenyu1996 知道了,感谢。
    newbieRenew
        4
    newbieRenew  
       2020-01-01 21:15:52 +08:00 via iPhone
    用 function 吧,hook,箭头函数。少了很多 this 烦恼。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   5374 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 06:59 · PVG 14:59 · LAX 23:59 · JFK 02:59
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.