时间戳

首页 > 解决方案 > 使用 Material-UI 在 React.js 中打开和关闭抽屉

javascript - 使用 Material-UI 在 React.js 中打开和关闭抽屉

问题描述

我正在为我的 UI 库使用 React Material Web 组件（ https://jamesmfriedman.github.io/rmwc/ ）。

我试图为我的界面实现抽屉。

抽屉，js

export default class DrawerBar extends Component {
  render() {
    return (
      <Drawer
        temporary
        open={this.props.opened}
        >
        <DrawerHeader>
          <headline6>Headline 6</headline6>
        </DrawerHeader>
        <DrawerContent>
          <SimpleListItem graphic="favorite" text="Body 2"/>
          <SimpleListItem graphic="favorite" text="Body 2"/>
          <SimpleListItem graphic="favorite" text="Body 2"/>
          <SimpleListItem graphic="favorite" text="Body 2"/>
          <SimpleListItem graphic="favorite" text="Body 2"/>
          <SimpleListItem graphic="favorite" text="Body 2"/>
          <SimpleListItem graphic="favorite" text="Body 2"/>
          <SimpleListItem graphic="favorite" text="Body 2"/>
        </DrawerContent>
      </Drawer>
    )
  }
}

具有打开抽屉图标的导航栏

export default class Navbar extends Component {
  render() {
    return (
      <Toolbar>
        <ToolbarRow>
          <ToolbarSection alignStart>
            <ToolbarMenuIcon use="menu" onClick={this.props.toggle}/>
            <ToolbarTitle>Syngenta Digital Innovation Lab Web UI Boilerplate</ToolbarTitle>
          </ToolbarSection>
          <ToolbarSection alignEnd>
            <ToolbarIcon use="share" onClick={this.props.login}/>
            <ToolbarIcon use="favorite" onClick={this.props.login}/>
            <ToolbarIcon use="search" onClick={this.props.login}/>
          </ToolbarSection>
        </ToolbarRow>
      </Toolbar>
    )
  }
}

和使用它的 App.js

class App extends Component {
  state = { drawer: false, login: false }

  drawerToggle = () => { this.setState( { ...this.state, drawer: !this.state.drawer } ) }
  loginToggle = () => { this.setState( { ...this.state, login: !this.state.login } ) }

  render() {
    return (
      <div className="app">

        <Login opened={this.state.login} toggle={this.loginToggle}/>
        <DrawerBar opened={this.state.drawer}/>
        <div className="body">
          <Navbar toggle={this.drawerToggle} login={this.loginToggle}/>
          <Feed/>

        </div>
      </div>
    );
  }
}

export default App;

每当我单击打开它的按钮时，它都可以正常工作，但是当我单击背景时它不会关闭。

我假设这是因为open参数 forDrawer是道具，而不是状态。

但我不确定如何调整这个问题。

标签： javascriptreactjs

解决方案

这与您是否传递状态或道具无关。您基本上在这里缺少一些道具参数和状态更改。

首先， Drawer 需要调用第二个道具onClose，你应该在toggle这里传递你的函数。参考在这里https://material-ui.com/api/drawer/

此外，请确保您将onClick侦听器和onKeydown侦听器传递给您的抽屉内容，并提供您的切换事件，以便在您的抽屉上单击时抽屉关闭（除非这不是所需的效果）

推荐阅读