Question

我遇到了一个问题，如果单击菜单项或叠加层，我似乎无法确定我的应用栏的LeftDrawer未关闭的位置（不确定这是否是一个选项，或者可能是反应组件）。理想情况下，我希望两个选项关闭抽屉。提前感谢您花时间看看这个！

这是我用来切换打开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() {
    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>
    );
  }
}

Answer 2

LeftDrawer内的NavBar组件包含onToggleDrawer={this.toggleDrawer}道具，LeftDrawer内没有使用。

此外，似乎内部组件中不需要handleToggle，它应该管理父级的状态。

如果有人在一段时间之后回答这个问题，请更好地阅读lifting up state，而不是回复。

App栏中的Material-UI Left Drawer不会在React中的叠加点击或菜单项单击时关闭

2 个答案: