Javascript 使用材质UI在React.js中打开和关闭抽屉

我正在为我的UI库使用React Material Web Components（）

我试图为我的接口实现抽屉

抽屉，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>
    )
  }
}

导出默认类抽屉扩展组件{
render（）{
返回(
标题6
)
}
}

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

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>
    )
  }
}

导出默认类导航栏扩展组件{
render（）{
返回(
先正达数字创新实验室Web UI样板
)
}
}

和使用它的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:false，login:false}
抽屉切换=（）=>{this.setState（{…this.state，抽屉：！this.state.drawer}}
loginToggle=（）=>{this.setState（{…this.state，login:！this.state.login}}
render（）{
返回(
);
}
}
导出默认应用程序；

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

我假设这是因为

Drawer

的

open

参数是一个道具，而不是一个状态

---

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

这与你是通过状态还是道具无关。您基本上缺少了一些道具参数和状态更改

首先，Drawer接受第二个名为

onClose

的道具，您应该在这里传递

toggle

函数。参考资料在这里

此外，请确保将

onClick

侦听器和

onKeydown

侦听器传递到抽屉内容，并提供切换事件，以便在单击抽屉时关闭抽屉（除非这不是所需的效果）

使用

onClick=this.drawerToggle(true)

或

---

（视情况而定）作为

上的属性，这与通过编程打开或关闭抽屉无关。This.drawerToggle不是一个函数。您是否正在提升状态以编程方式实现此目标？您是如何获得对

对象的引用的，更不用说调用一个不存在的方法了？你是从哪里得到这些信息的？来自如上所述的React Material Web组件。App.js中定义了drawerToggle方法。

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