将物料UI选项卡与抽屉反应

以前有人能弄明白吗?如何在tab viewer中打开抽屉?我可以很好地处理对话框,但不能处理选项卡。

这是一个示例代码

class sidebarDrawer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    render() {
        return (
             <div>                
                 <p>My sidebar content</p>
             </div>
        );
    }
}

class TabComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
           slideIndex: 0,
           open: false,
        };
    }

    handleChange = (value) => {
        this.setState({
            slideIndex: value,
        });
    };

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

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

    render() {
        let materialUITheme;
        return (
            <MuiThemeProvider muiTheme={getMuiTheme()}>
               <div>
                  <Tabs
                      onChange={this.handleChange}
                      value={this.state.slideIndex}>
                      <Tab label="Tab One" value={0} />
                      <Tab label="Tab Two" value={1} />
                  </Tabs>
                  <SwipeableViews
                      index={this.state.slideIndex}
                      onChangeIndex={this.handleChange}>
                      <div>
                          <h2 style={styles.headline}>Tabs with slide effect</h2>
                          Swipe to see the next slide.<br />
                      </div>
                      <div style={styles.slide}>
                          <div>
                              <RaisedButton
                                  label="Open Drawer"
                                  onClick={this.handleToggle}
                              />
                              <Drawer
                                  docked={false}
                                  width={200}
                                  open={this.state.open}
                                  onRequestChange={(open) => this.setState({open})}
                              >
                                  <AppBar
                                      title="Playlists"
                                      onRightIconButtonTouchTap={this.handleClose}
                                      showMenuIconButton={false}/>
                                  <sidebarDrawer />
                              </Drawer>
                           </div>  
                       </div>
                   </SwipeableViews>
                </div>
            </MuiThemeProvider>
         );
     }
}

这是 WebpackBin 给你玩。转到第二个选项卡。单击按钮。回到第一个标签,你会看到抽屉在那里打开。

提前谢谢各位。