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

【问题标题】：Opening and Closing a Drawer in React.js using Material-UI使用 Material-UI 在 React.js 中打开和关闭抽屉
【发布时间】：2018-11-24 23:17:08
【问题描述】：

我正在为我的 UI 库使用 React Material Web Components(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;

当我点击打开它的按钮时，它工作正常，但当我点击背景时它不会关闭。

我假设这是因为 Drawer 的 open 参数是一个道具，而不是一个状态。

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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

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

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

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

【讨论】：

这与以编程方式打开或关闭抽屉无关。

【解决方案2】：

使用

onClick=this.drawerToggle(true)

或

onClick=this.drawerToggle(this.props.opened)

（视情况而定）作为<Drawer />的属性

【讨论】：

this.drawerToggle 不是函数。您是否正在提升状态以编程方式实现这一目标？您是如何获得对<Drawer /> 对象的引用的，更不用说调用不存在的方法了？您是从哪里得知这些信息的？
来自如上所述的 React Material Web Components。 drawToggle 方法在 App.js 中定义。