材质 UI - 抽屉未打开

Question

我有一个使用 Material-UI 1.2 的 react 应用。

虽然状态已正确更新，但抽屉并没有打开关闭。 我还在onLeftIconButtonTouchTap 上正确应用了bind。

这是我对TemporaryDrawer 的实现：

// .. imports

const styles = {
    list: {
        width: 250,
    },
    fullList: {
        width: 'auto',
    },
    menuButton: {
        marginLeft: 12,
        marginRight: 36,
    },
};

class TemporaryDrawer extends React.Component {

    render() {
        const { classes, toggleDrawer, isOpen } = this.props;

        const sideList = (
            <div className={classes.list}>
                <List>
                <ListItem button>
                        <ListItemIcon>
                            <InboxIcon />
                        </ListItemIcon>
                        <ListItemText primary="Inbox" />
                    </ListItem>
                </List>
            </div>
        );

        console.log(' isOpen ' + isOpen);
        return (    
            <div>
                <IconButton className={classes.menuButton} color="inherit" onClick={toggleDrawer}>
                    <MenuIcon />
                </IconButton>
                <Drawer open={isOpen} onClose={toggleDrawer}>
                    <div
                        tabIndex={0}
                        role="button"
                        onClick={toggleDrawer}
                        onKeyDown={toggleDrawer}
                    >
                        {sideList}
                    </div>
                </Drawer>
            </div>
        );
    }
}

TemporaryDrawer.propTypes = {
    classes: PropTypes.object.isRequired
};

export default withStyles(styles)(TemporaryDrawer);

在此 MenuAppBar.js 中使用

// ... imports

const styles = {
    root: {
        flexGrow: 1,
    },
    flex: {
        flex: 1,
    },
    menuButton: {
        marginLeft: -12,
        marginRight: 20,
    },
};

class MenuAppBar extends React.Component {
    state = {
        auth: true,
        drawerOpen: false,
    };

    handleMenu = () => {
        this.setState({ drawerOpen: !this.state.drawerOpen });
    };

    render() {
        const { classes } = this.props;
        const { drawerOpen } = this.state;
        console.log(' state ' + this.state.drawerOpen);
        return (
            <div className={classes.root}>
                <AppBar position="static" onLeftIconButtonTouchTap={this.handleMenu.bind(this)}>
                    <Toolbar>
                        <TemporaryDrawer isOpen={drawerOpen} toggleDrawer={this.handleMenu} />
                    </Toolbar>
                </AppBar>
            </div>
        );
    }
}

MenuAppBar.propTypes = {
    classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(MenuAppBar);

package.json

{
  "name": "find-swim",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/codemod": "^1.1.0",
    "@material-ui/core": "^1.2.0",
    "@material-ui/icons": "^1.1.0",
    "firebase": "^4.8.0",
    "material-ui": "^0.19.4",
    "material-ui-autocomplete-google-places": "^2.2.0",
    "material-ui-places": "^1.1.7",
    "mui-places-autocomplete": "^2.0.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-ga": "^2.4.1",
    "react-google-button": "^0.4.0",
    "react-google-maps": "^9.2.2",
    "react-places-autocomplete": "^5.4.3",
    "react-redux": "^5.0.6",
    "react-redux-firebase": "^2.0.0-beta.16",
    "react-redux-form": "^1.16.5",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^1.0.16",
    "react-tap-event-plugin": "^3.0.2",
    "recompose": "^0.26.0",
    "redux": "^3.7.2",
    "redux-devtools": "^3.4.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "set GENERATE_SOURCEMAP=false && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "deploy": "firebase deploy"
  },
  "devDependencies": {
    "redux-devtools-extension": "^2.13.2"
  }
}

Answer 1

这很疯狂，但问题在于组合：

"@material-ui/core": "^1.2.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",

只要我在他的代码沙箱中将我的依赖项更新为 Ramil 的依赖项，它就起作用了。

"@material-ui/core": "1.2.3",
"react": "^16.3.0",
"react-dom": "^16.3.0",

我希望这对某人有所帮助..

Answer 2

我不知道你从哪里得到这个onLeftIconButtonTouchTap={this.handleMenu.bind(this)}

但你可以做的是：

<AppBar position="static">
    <IconButton
        className={classes.menuButton}
        color="inherit"
        aria-label="Menu"
        onClick={this.handleMenu.bind(this)}
    >
        <MenuIcon />
    </IconButton>
    <Toolbar>
        <TemporaryDrawer
            isOpen={drawerOpen}
            toggleDrawer={this.handleMenu}
        />
    </Toolbar>
</AppBar>

编辑：我在沙盒中尝试了您的代码。显然，您的代码没有任何问题。 https://codesandbox.io/s/pk9921kkw0