【发布时间】：2018-03-02 14:33:19
【问题描述】：
我正在运行 MaterialUI-Next 并且我已经尝试了抽屉的所有变体，但是当点击抽屉中的项目时我无法关闭它。我知道临时变体允许我这样做，但是当单击任何内容时它会关闭。我只需要在单击 ListItem 时关闭它。
在我的例子中，我在抽屉里有一个 ExpansionPanel，里面有 Lists 和 ListItems。单击扩展面板不应关闭抽屉，抽屉应保持打开状态，因为我还没有准备好离开。但是，当我单击抽屉中的 ListItem（它们包含 component="a" 项目）时，抽屉应该关闭，并且 component="a" 导航到它的 href。
我的代码非常基本和普通，实际上是来自MaterialUI-Next Drawers 的精确演示。他们还有一个测试代码的游乐场。但无论如何，这是我的一些相关代码
我的抽屉：
<Drawer
variant="persistent" //I tried "temporary", and "permanent" as well
elevation={16}
anchor="right"
open={this.state.open}
// onClick={(open) => this.setState({ open: false })}
// onKeyDown={(open) => this.setState({ open: false })}>
<SystemMenu />
</Drawer>
存储在 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="/app/page1">
<ListItemText primary="Page 1" />
</ListItem>
<ListItem
button
component="a"
href="/app/page2">
<ListItemText primary="Page 2" />
</ListItem>
<ListItem
button
component="a"
href="/app/page3">
<ListItemText primary="Page 3" />
</ListItem>
</List>
</ExpansionPanelDetails>
</ExpansionPanel>
</Grid>
</Grid>
</div>
);
}
}
export default withStyles(styles)(SystemMenu);
我在其他帖子中读到，您可以使用道具将onKeyDown={(open) => this.setState({ open: false })} 传递给它的孩子。但是我是 React 的新手，对这个概念有一些问题。
基本上，我需要让 onKeyDown 为 ListItems 工作，而不是实际的抽屉。我可能需要也可能不需要将我的 Drawer 变体改回临时的 onKeyDown 属性才能工作。不太确定。
（记住上面的链接提供了一个测试代码的游乐场。比我尝试为 React 构建 jFiddle 好多了）
编辑
我想出了一个不同的方法，但不是我最喜欢的。
通过将 SystemMenu 中的内容移动到 Menu.js 文件（我的 Drawer 导入、函数和状态所在的位置），我能够创建一个带有超时的 handleClose 函数，以便它关闭。这是函数：
handleClose = () => {
if (!this.state.open) {
return;
}
this.timeout = setTimeout(() => {
this.setState({ open: false });
this.setState({ expanded: null });
});
};
这需要持久变体和handleOpen() 函数来保持抽屉打开，直到我单击具有handleClose() 函数的列表。所以，我的抽屉现在是这样的
<Drawer
variant="persistent"
elevation={16}
anchor="right"
open={this.state.open}
onClick={() => { this.handleOpen(); }}>
...
My System Menu code in here, not too happy about this part. :(
...
</Drawer>
接下来，在包含扩展面板和列表的系统菜单代码中，我将handleClose() 函数添加到列表中，它可以导航以及关闭抽屉和扩展面板。像这样：
<List
className="quickpanel-navigation"
onClick={() => { this.handleClose(); }}>
.... ListItems code here ....
</List>
这是一个好的方法，但我更愿意将 SystemMenu 代码放在另一个文件中并导入到这个文件中，并使用道具从 SystemMenu.js 文件中操作 Menu.js 文件中的关闭函数。如果还有其他人想继续帮助我，我将不胜感激。
【问题讨论】：
标签： reactjs material-ui