如何在不同 class 内关闭 swipeabledrawer

Question

我对 Material-ui 网站上的 SwipeableDrawer 解释有点困惑。基本上我有一个组件 'Sidebar' 如果用户点击应用栏上的按钮或用户滑动打开侧边栏，它会打开一个 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}
/>

然后在边栏中 class 我这样做

// 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

如何在不同 class 内关闭 swipeabledrawer

How to close swipeabledrawer within different class

javascript

reactjs

material-ui

react-props

react-state