[ad_1]
I am running MaterialUI-Next and I've tried all variants of the drawer but I can't get it to close when an item in the drawer has been clicked. I know the temporary variant allows me to do that but it closes when anything is clicked. I need it to close only when a ListItem is clicked. In my case, I have a ExpansionPanel in the drawer with Lists and ListItems in it. Clicking the ExpansionPanel shouldn't close the drawer, the drawer should remain open because I am not ready to navigate away. However when I click a ListItem in the drawer (They contain component="a" items) then the drawer should close and the component="a" navigated to its href.
My code is extremely basic and vanilla, practically the exact demo from MaterialUI-Next Drawers. They also have a playground to test code. But anyhow, here is some of my relevant code
My drawer:
<Drawer
variant="persistent"
elevation=16
anchor="right"
open=this.state.open
// onClick=(open) => this.setState( open: false )
// onKeyDown=(open) => this.setState( open: false )>
<SystemMenu />
</Drawer>
My Content stored in SystemMenu:
import React from 'react';
import withStyles from 'material-ui-next/styles';
import List, ListItem, ListItemText from 'material-ui-next/List';
import ExpansionPanel, ExpansionPanelDetails, ExpansionPanelSummary from 'material-ui-next/ExpansionPanel';
import ListSubheader from 'material-ui-next/List/ListSubheader';
import ChevronDown from 'mdi-material-ui';
import Grid from 'material-ui-next/Grid';
const OTHERPAGES = require('data/pages.js');
const systemMenuData = OTHERPAGES['systemMenuPagesItems'];
class SystemMenu extends React.Component
constructor(props)
super(props);
this.state =
expanded: null,
;
handleChange = panel => (event, expanded) =>
this.setState(
open: false,
expanded: expanded ? panel : false,
);
;
render()
const expanded, open = this.state;
return (
<div>
<Grid
container>
<Grid item xs=12 style=padding: 0>
<ListSubheader component="div">MENU ITEMS</ListSubheader>
</Grid>
</Grid>
<Grid
container>
<Grid item xs=12>
<ExpansionPanel
expanded=expanded === 'panel1'
onChange=this.handleChange('panel1')>
<ExpansionPanelSummary
expandIcon=<ChevronDown />>
Players
</ExpansionPanelSummary>
<ExpansionPanelDetails>
<List>
<ListItem
button
component="a"
href="http://stackoverflow.com/app/page1">
<ListItemText primary="Page 1" />
</ListItem>
<ListItem
button
component="a"
href="http://stackoverflow.com/app/page2">
<ListItemText primary="Page 2" />
</ListItem>
<ListItem
button
component="a"
href="http://stackoverflow.com/app/page3">
<ListItemText primary="Page 3" />
</ListItem>
</List>
</ExpansionPanelDetails>
</ExpansionPanel>
</Grid>
</Grid>
</div>
);
export default withStyles(styles)(SystemMenu);
I read in other posts that you can pass the onKeyDown=(open) => this.setState( open: false ) to its children with props. But I am new in React and having some problems with this concept.
Can someone throw me a bone here? Basically, making the onKeyDown work for the ListItems, not the actual drawer. I may or may not have to change my Drawer variant back to temporary for the onKeyDown property to work. Not too sure.
Thanks in advance. (Remember the link above offers a playground to test code. Much better than me trying to build a jFiddle for React)
[ad_2]
لینک منبع
