引き出しを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コンポーネントには内部状態がないため、彼を機能/ステートレスコンポーネントにすることができます。