Toggle Drawer von AppBar LeftIcon

Question

Hallo Stackoverflowers,

Ich beginne mein erstes Material-UI-Projekt mit ReactJS.

Ich habe die AppBar und die Schublade arbeiten (Schublade nur mit Swipe von links Bezzel nach rechts).

Jetzt möchte ich die AppBar onLeftIconButtonTouchTap zum Umschalten der Schublade.

Dies ist mein aktueller Code für die AppBar.jsx Datei:

import React from 'react'; 
import AppBar from 'material-ui/AppBar'; 

import DrawerLeft from './DrawerLeft.jsx'; 

function handleTouchTap() { 
    // Tried it her 
} 

const AppBarTop =() => (
    <div> 
     <AppBar 
      title="Title" 
      onLeftIconButtonTouchTap={handleTouchTap} 
     /> 
     <DrawerLeft /> 
    </div> 
); 

export default AppBarTop; 

Und der DrawerLeft.jsx ist wie folgt:

import React from 'react'; 
import Drawer from 'material-ui/Drawer'; 
import MenuItem from 'material-ui/MenuItem'; 
import RaisedButton from 'material-ui/RaisedButton'; 

export default class DrawerLeft extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = {open: false}; 
} 

handleToggle() { 
    this.setState({open: !this.state.open}); 
} 

handleClose() { 
    this.setState({open: false}); 
} 

render() { 
    return (
     <div> 
      <RaisedButton 
       label="Open Drawer" 
       onTouchTap={this.handleToggle.bind(this)} 
      /> 
      <Drawer 
       docked={false} 
       width={200} 
       open={this.state.open} 
       onRequestChange={(open) => this.setState({open})} 
      > 
       <MenuItem onTouchTap={this.handleClose.bind(this)}>Menu Item</MenuItem> 
       <MenuItem onTouchTap={this.handleClose.bind(this)}>Menu Item 2</MenuItem> 
      </Drawer> 
     </div> 
    ); 
} 
} 

So wie kann ich die Schublade aus dem APPLIST wechselt ihre LinkeIcon?

Vielen Dank im Voraus für Ihre Hilfe.

Theo

Answer 1

Sie können es leicht in zwei Schritten erreicht werden:

1 - Du wurde haben die Schublade der open Zustand in Ihrer AppBar Komponente zu halten, und wie Sie vielleicht wissen - Sie nicht in der Lage sein, um es mit einer zustandslosen/funktionalen Komponente zu machen.
Beispiel Ihrer neuen AppBarTop Komponente:

import React from 'react'; 
import AppBar from 'material-ui/AppBar'; 
import DrawerLeft from './DrawerLeft.jsx'; 

export default class AppBarTop extends React.Component { 

    constructor() { 
     this.state = { 
      open: false 
     } 
    } 
    //Toggle function (open/close Drawer) 
    toggleDrawer() { 
     this.setState({ 
      open: !this.state.open 
     }) 
    } 

    render() { 
     return (
      <div> 
       <AppBar 
        title="Title" 
        onLeftIconButtonTouchTap={this.toggleDrawer.bind(this)} 
       /> 
       <DrawerLeft open={this.state.open} onToggleDrawer={this.toggleDrawer.bind(this)} /> 
      </div> 
     ) 
    } 
} 

2 - Jetzt in der DrawerLeft Komponente anstelle this.state.open der Verwendung sind Sie gonna verwenden this.props.open. Und wenn Sie den offenen Zustand wechseln möchten, können Sie einfach this.props.onToggleDrawer anrufen - da wir es vom Elternteil übergeben.

Sie können die handleToggle und handleClose aus der DrawerLeft entfernen. Und da Ihre DrawerLeft Komponente keinen internen Status hat, können Sie ihn in eine funktionale/zustandslose Komponente verwandeln.