Wie kann ich die AppBar-Material-Benutzeroberfläche bereitstellen?

Question

Ich bin neu in React Material UI und ich versuche, AppBar zu implementieren, aber ich weiß nicht, wie kann ich Kinder in diese NavBar aufnehmen. Ich möchte AppBar bereitstellen, wenn ich auf das Menü mit den drei linken Zeilen klicke. Mein .jsx ist:

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> 
    ); 
} 
} 

Aber dieser Code ersetzt die 3 linken Zeilen für FlatButtons. Ich möchte, dass, wenn ich auf das MenuButtonLeft klicke ein Seitenmenü mit den Seiten, die meine Website enthalten (zu Hause, über uns, Kontakt, ...). Mit dem Code, den ich vorher gezeigt habe, wird nur das MenuButtonLeft und ein Titel in einer Toolbar angezeigt, aber es wird keine Aktion ausgeführt, es wird kein Menü mit dem href auf meinen anderen Seiten auf meiner Website bereitgestellt.

Vielen Dank.

Answer 1

Ich löse das Problem oben! Hier ist die Lösung:

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> 
    ); 
} 
} 

Answer 2

Verwenden Sie den folgenden Code.

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> 
    ); 
} 
}