dyllen
V2EX  ›  React

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

  •  
  •   dyllen · Jan 1, 2020 · 2812 views
    This topic created in 2345 days ago, the information mentioned may be changed or developed.
    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 replies    2020-01-01 21:15:52 +08:00
    shenyu1996
        1
    shenyu1996  
       Jan 1, 2020 via Android   ❤️ 1
    Justin13
        2
    Justin13  
       Jan 1, 2020 via Android   ❤️ 1
    上箭头函数,这是 js 中的 this 问题,和 react 没有关系
    dyllen
        3
    dyllen  
    OP
       Jan 1, 2020
    @Justin13 @shenyu1996 知道了,感谢。
    newbieRenew
        4
    newbieRenew  
       Jan 1, 2020 via iPhone
    用 function 吧,hook,箭头函数。少了很多 this 烦恼。
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1036 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 40ms · UTC 18:40 · PVG 02:40 · LAX 11:40 · JFK 14:40
    ♥ Do have faith in what you're doing.