Question

我对Material-ui网站上的SwipeableDrawer解释有些困惑。基本上，我有一个组件“侧边栏”，如果用户单击应用栏上的按钮，或者用户滑动以打开侧边栏，则会打开一个SwipeableDrawer。

在应用栏中，您可以按下一个按钮，该按钮将传递到父组件。

// Topbar.js
<IconButton color="inherit" onClick={onSidebarOpen}>
   <MenuIcon/>
</IconButton>

// Main.js
<Topbar onSidebarOpen={this.handleSidebarOpen}/>

handelSidebarOpen方法设置边栏处于打开还是关闭状态。因此，现在的问题是，如果用户将抽屉滑开，我还不确定如何正确指示补充工具栏打开或关闭抽屉。

我使用了这种方法

<Sidebar
  open={this.state.openSidebar}
  onClose={this.handleSidebarClose}
/>

然后在补充工具栏类中执行此操作

// Inside render method
const {open, onClose} = this.props;

return (
  <SwipeableDrawer
        open={open}
        onOpen={event => this.showDrawer(event)}
        onClose={onClose}
        disableBackdropTransition={!iOS}
        disableDiscovery={iOS}
      >
        {console.log(onClose)}
        {this.fullList()}
  </SwipeableDrawer>
);

如果您不了解问题，请随时向我澄清。我做了一个小样演示来显示问题。

https://codesandbox.io/embed/dazzling-galileo-mc3oz?fontsize=14&hidenavigation=1&theme=dark

尝试滑动侧边栏打开并观察会发生什么。预先感谢。

Answer 1

只需在Main.js文件的边栏中传递handleSidebarOpen方法即可。

<Sidebar
   open={this.state.openSidebar}
   onOpen={this.handleSidebarOpen}
   onClose={this.handleSidebarClose}
/>

在您的Sidebar.js中获得该函数，并在SwipeableDrawer的onOpen属性上使用它。像下面一样，

const { open, onOpen, onClose } = this.props;

return (
      <SwipeableDrawer
        open={open}
        onOpen={onOpen}
        onClose={onClose}
        disableBackdropTransition={!iOS}
        disableDiscovery={iOS}
      >
        {console.log(onClose)}
        {this.fullList()}
      </SwipeableDrawer>
    );

我还为您创建了沙箱；

https://codesandbox.io/s/react-gki1u?fontsize=14&hidenavigation=1&theme=dark

如何关闭不同类别中的swipeabledrawer

1 个答案: