reactjs - 应用栏中的 Material-UI 左抽屉不会在 React 中单击覆盖层或单击菜单项时关闭

Question

我遇到了一个问题，如果我单击菜单项或覆盖层，我似乎无法确定应用程序栏的 LeftDrawer 未关闭的位置(不确定这是否是一个选项，或者是否可以使用 react 组件) )。理想情况下，我希望这两个选项都能关闭抽屉。预先感谢您花时间查看此内容!

这是我用来切换打开 LeftDrawer 的 Navbar 类:

// Dependencies
import React from 'react';

//Comonents
import LeftDrawer from './left-drawer.jsx';

// Styles
import './nav-bar.scss';
import AppBar from 'material-ui/AppBar';

class NavBar extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      open: false
    };
  }

  toggleDrawer(){
    this.setState({
      open: !this.state.open
    });
  }

  render(){
    return (
      <div className='nav-bar'>
        <AppBar title='My App' onLeftIconButtonTouchTap={() => this.toggleDrawer()}/>
        <LeftDrawer open={this.state.open} onToggleDrawer={this.toggleDrawer.bind(this)} />
      </div>
    );
  }
}

export default NavBar;

这是带有 MenuItems 的 LeftDrawer 类:

// Dependencies
import React from 'react';
import { Link } from 'react-router-dom';

// Styles
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';

export default class LeftDrawer extends React.Component {
constructor(props) {
    super(props);
    this.state = {open: false};
}

handleToggle() {
    this.setState({open: !this.state.open});
}

handleClose() {
    this.setState({open: false});
}

render() {
    return (
        <div>
            <Drawer
                docked={false}
                width={200}
                open={this.props.open}
                onRequestChange={(open) => this.setState({open})}
            >
                <Link to="/home"><MenuItem onTouchTap={this.handleClose.bind(this)}>Home</MenuItem></Link>
                <Link to="/topics"><MenuItem onTouchTap={this.handleClose.bind(this)}>404</MenuItem></Link>
            </Drawer>
        </div>
        );
    }
}

Answer 1

原因是您通过 props 值(父组件的 state 值)控制抽屉，因此您需要更新父 state 值通过从子级调用函数。

在父级中定义一个handleClose函数:

handleClose() {
    this.setState({open: false})
}

将此函数传递给 LeftDrawer 组件:

<LeftDrawer open={this.state.open} handleClose={this.handleClose.bind(this)} onToggleDrawer={this.toggleDrawer.bind(this)} />

然后在子handleClose函数中调用父handleClose函数:

handleClose() {
    this.props.handleClose();
}

完整代码:

import AppBar from 'material-ui/AppBar';

class NavBar extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      open: false
    };
    this.toggleDrawer = this.toggleDrawer.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

  toggleDrawer(){
    this.setState({
      open: !this.state.open
    });
  }

  handleClose(){
    this.setState({open: false})
  }

  render(){
    return (
      <div className='nav-bar'>
        <AppBar title='My App' onLeftIconButtonTouchTap={this.toggleDrawer}/>
        <LeftDrawer open={this.state.open} handleClose={this.handleClose} onToggleDrawer={this.toggleDrawer} />
      </div>
    );
  }
}

export default class LeftDrawer extends React.Component {
  constructor(props) {
      super(props);
      this.state = {open: false};
      this.handleClose = this.handleClose.bind(this);
  }

  handleToggle() {
      this.setState({open: !this.state.open});
  }

  handleClose() {
     this.props.handleClose();
  }

  render() {
    return (
        <div>
            <Drawer
                docked={false}
                width={200}
                open={this.props.open}
                onRequestChange={(open) => this.setState({open})}
            >
                <Link to="/home"><MenuItem onTouchTap={this.handleClose}>Home</MenuItem></Link>
                <Link to="/topics"><MenuItem onTouchTap={this.handleClose}>404</MenuItem></Link>
            </Drawer>
        </div>
    );
  }
}