Question

我在使用React和Material-UI打开的选项卡中打开抽屉时遇到问题。我可以打开抽屉，但它显示在第一个选项卡中。起初我认为我构建组件的方式有问题，所以我在WebpackBin中创建了一个非常简单的组件，它做了同样的事情。

有没有人能够解决这个问题？如何在标签查看器中打开抽屉？我可以使用对话框来完成它，但不能使用Tabs。

以下是示例代码

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。转到第二个选项卡。单击按钮。回到第一个标签，你会看到抽屉在那里打开。

先谢谢你们。

Answer 1

这可能是hackish方式，但有效

将样式position: 'relative'添加到标签

覆盖<Drawer>

的位置

containerStyle={{ position: 'absolute' }}  // default is 'fixed'
overlayStyle={{ position: 'absolute' }}

工作Webpack Bin

带有抽屉的{React Material-UI标签

1 个答案: