Переключить Ящик от AppBar LeftIcon

Question

Здравствуйте Stackoverflowers,

Я начинаю свой проект Fisrt Материала-интерфейс с ReactJS.

У меня есть 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 - Тебе придется держать open состояние выдвижного ящика в вашем AppBar компоненте, и, как вы знаете, - вы не сможете для этого, используя компонент без гражданства/функциональности.
Пример вашего нового компонента 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 - так как мы передаем его из родителя.

Вы можете удалить handleToggle и handleClose с DrawerLeft. И так как ваш компонент DrawerLeft не имеет внутреннего состояния, вы можете превратить его в функциональный/безгосударственный компонент.