Material-UI The left drawer in the app bar will not close when overlapping or clicking on a menu item.
I have a problem, I can't tell that my LeftDrawer for my app bar doesn't close if I click on a menu item or overlay (not sure if this is an option or perhaps with react components). Ideally, I would like both options to close the drawer. Thank you in advance for taking the time to look at this!
This is my Navbar class that I am using to toggle LeftDrawer:
// 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;
This is the LeftDrawer class with MenuItems:
// 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>
);
}
}
source to share
The reason is that you are manipulating a box of values props
(the state
value of the parent component), so you need to update the parent value state
by calling the function from the child.
Define a handleClose function on the parent object:
handleClose() {
this.setState({open: false})
}
pass this function to the component LeftDrawer
:
<LeftDrawer open={this.state.open} handleClose={this.handleClose.bind(this)} onToggleDrawer={this.toggleDrawer.bind(this)} />
Then inside the child's handleClose function calls this parentlockClose function:
handleClose() {
this.props.handleClose();
}
Complete code:
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>
);
}
}
source to share
The component LeftDrawer
inside NavBar
contains a onToggleDrawer={this.toggleDrawer}
prop that is not used internally LeftDrawer
.
Also, it handleToggle
doesn't seem to be required in an inner component that should manage the state of the parent.
If someone lands on this question after a while, it is better to read uplifting the state instead of accepting the answers.
source to share