Question

我是React Material UI中的新手，我正在尝试部署AppBar，但我不知道如何将childs包含到此NavBar中。当我点击左边三行菜单时，我想部署AppBar。我的.jsx是：

import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import FlatButton from 'material-ui/FlatButton';

const STYLES = {
title: {
    cursor: 'pointer',
},
titleStyle: {
    textAlign: 'center'
},
buttonStyle: {
    backgroundColor: 'transparent',
    color: 'white'
}
};

const rightButtons = (
<div>
    <FlatButton label="About" style={STYLES.buttonStyle} />
    <FlatButton label="Home" style={STYLES.buttonStyle} />
</div>
);

export default class MenuAlumno extends React.Component {
constructor() {
    super();
    this.state = {
        abierto:false
    }
}

handleTouchTap = () => {
    //alert('Has clickado sobre el título');
    /*
    console.log(this.state.abierto)
    this.setState({
        abierto:true
    });
    */
    console.log(this.state.abierto)
    this.state.abierto = true;
    console.log(this.state.abierto)
}

render() {
    return (
        <AppBar
            title={<span style={STYLES.title}>- PLATAFORMA DE INCIDENCIAS -
</span>}
            onTitleTouchTap={this.handleTouchTap}
            titleStyle={STYLES.titleStyle}
            iconClassNameRight="muidocs-icon-navigation-expand-more"
            iconElementLeft={rightButtons}
        >
        </AppBar>
    );
}
}

但是这段代码替换了FlatButtons的3条左行。我希望当我点击MenuButtonLeft一个侧边菜单部署包含我的网站的页面（主页，关于我们，联系，...）。我之前输入的代码只显示MenuButtonLeft和标题到工具栏，但它没有执行任何操作，它不会将任何带有href的菜单部署到我网站上的其他页面。

谢谢。

Answer 1

使用以下代码。

import React from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import FlatButton from 'material-ui/FlatButton';
import Drawer from 'material-ui/Drawer';

const STYLES = {
title: {
    cursor: 'pointer',
},
titleStyle: {
    textAlign: 'center'
},
buttonStyle: {
    backgroundColor: 'transparent',
    color: 'white'
}
};

const rightButtons = (
<div>
    <FlatButton label="About" style={STYLES.buttonStyle} />
    <FlatButton label="Home" style={STYLES.buttonStyle} />
</div>
);

export default class MenuAlumno extends React.Component {
constructor() {
    super();
    this.state = {
        abierto:false
    }
}

handleTouchTap = () => {
    //alert('Has clickado sobre el título');
    /*
    console.log(this.state.abierto)
    this.setState({
        abierto:true
    });
    */
    console.log(this.state.abierto)
    this.state.abierto = true;
    console.log(this.state.abierto)
}

render() {
    return (
<div>
        <AppBar
            title={<span style={STYLES.title}>- PLATAFORMA DE INCIDENCIAS -
</span>}
            onTitleTouchTap={this.handleTouchTap}
            titleStyle={STYLES.titleStyle}
            iconClassNameRight="muidocs-icon-navigation-expand-more"

        >
        </AppBar>
        <Drawer docked={false} width={200} open={this.state.abierto} >
        {rightButtons}
        </Drawer>
</div>
    );
}
}

Answer 2

我解决了上面的问题！这是解决方案：

import React from 'react';
import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
import IconButton from 'material-ui/IconButton';
import NavigationMenu from 'material-ui/svg-icons/navigation/menu';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
/*
import IconButton from 'material-ui/IconButton';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
import FlatButton from 'material-ui/FlatButton';
*/

const STYLES = {
title: {
    cursor: 'pointer'
},
titleStyle: {
    textAlign: 'center'
},
displayMenuTrue: {
    position: 'relative'
},
displayMenuFalse: { 
    display: 'none'
},
contentStyle: {
    transition: 'margin-left 450ms cubic-bezier(0.23, 1, 0.32, 1)',
    marginLeft: '0px',
    top: '0px'
},
contentStyleActive: {
    marginLeft: '256px',
    position: 'relative',
    top: '-144px'
}
};

export default class MenuAlumno extends React.Component {
constructor() {
    super();
    this.state = {
        drawerOpen:false
    }
}

handleTouchTap = () => {
    //alert('Has clickado sobre el título');
    /*
    console.log(this.state.abierto)
    this.setState({
        abierto:true
    });
    */

    console.log(this.state.drawerOpen)
    this.state.drawerOpen = true;
    console.log(this.state.drawerOpen)

}

controlMenu = () => {
    if (this.state.drawerOpen) {
        console.log(this.state.drawerOpen)
        this.setState({ 
            drawerOpen: false 
        });

        $('.contenedor').css(STYLES.contentStyle);
    } else {
        console.log(this.state.drawerOpen)
        this.setState({ 
            drawerOpen: true 
        });


$('.contenedor').css(STYLES.contentStyle).css(STYLES.contentStyleActive);
    }
}

render() {
    return (
        <div>
            <AppBar
                title={<span style={STYLES.title}>- PLATAFORMA DE 
INCIDENCIAS -</span>}
                onTitleTouchTap={this.handleTouchTap}
                titleStyle={STYLES.titleStyle}
                iconElementLeft={this.state.drawerOpen ?  <IconButton>
<NavigationClose/></IconButton> : <IconButton><NavigationMenu/></IconButton>}
                onLeftIconButtonTouchTap={this.controlMenu}
            />
            <Drawer 
                open={this.state.drawerOpen}
                containerStyle={this.state.drawerOpen ? 
STYLES.displayMenuTrue : STYLES.displayMenuFalse}
            >
                <MenuItem>Menu Item</MenuItem>
                <MenuItem>Menu Item</MenuItem>
                <MenuItem>Menu Item</MenuItem>
            </Drawer>
        </div>
    );
}
}

如何部署AppBar Material UI？

2 个答案: