從AppBar切換抽屜LeftIcon

Question

您好Stackoverflowers，

我開始使用ReactJS進行我的fisrt Material-UI項目。

Ik的AppBar和抽屜工作（抽屜只能從左邊的刷子滑動到右側）。

現在我想要AppBar onLeftIconButtonTouchTap切換抽屜。

這是我對AppBar.jsx文件當前代碼：

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; 

而且DrawerLeft.jsx情況如下：

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

所以，我怎樣才能從APPLIST切換抽屜其LeftIcon？

在此先感謝您的幫助。

西奧

Answer 1

您可以輕鬆地實現它在2個步驟：

1 - 你會不得不拿在AppBar組件的抽屜的open狀態，正如你可能知道 - 你不會成爲能夠使用無狀態/功能組件來完成它。新AppBarTop組件的
例子：

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 - 現在，在DrawerLeft組件，而不是使用this.state.open你是要去使用this.props.open。如果你想切換打開狀態，你可以撥打this.props.onToggleDrawer - 因爲我們從父母傳遞它。

您可以從DrawerLeft中刪除handleToggle和handleClose。 而且由於您的DrawerLeft組件沒有內部狀態 - 您可以將其變成功能/無狀態組件。