javascript - 如何关闭不同类别中的swipeabledrawer

我对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

尝试滑动侧边栏打开并观察会发生什么。提前致谢。

最佳答案

只需在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

关于javascript - 如何关闭不同类别中的swipeabledrawer，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58894071/