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

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

  •  
  •   dyllen · 47 天前 · 927 次点击
    这是一个创建于 47 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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   47 天前 via Android   ❤️ 1
    Justin13
        2
    Justin13   47 天前 via Android   ❤️ 1
    上箭头函数,这是 js 中的 this 问题,和 react 没有关系
    dyllen
        3
    dyllen   47 天前
    @Justin13 @shenyu1996 知道了,感谢。
    newbieRenew
        4
    newbieRenew   47 天前 via iPhone
    用 function 吧,hook,箭头函数。少了很多 this 烦恼。
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3072 人在线   最高记录 5168   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 13:27 · PVG 21:27 · LAX 05:27 · JFK 08:27
    ♥ Do have faith in what you're doing.