Question

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

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

抽屉，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的{{1}}参数是道具，而不是州。

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

Answer 1

这与你是否传递状态或道具无关。你基本上缺少一些道具论点和状态变化。

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

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

Answer 2

使用

onClick=this.drawerToggle(true)

或

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

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

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

2 个答案: