MaterialUI-Next 在孩子点击时关闭抽屉

Question

我正在运行 MaterialUI-Next 并且我已经尝试了抽屉的所有变体，但是当单击抽屉中的项目时我无法关闭它。我知道临时变体允许我这样做，但是当点击任何东西时它会关闭。我需要它仅在单击 ListItem 时关闭。

就我而言，我在抽屉里有一个 ExpansionPanel，里面有 Lists 和 ListItems。单击 ExpansionPanel 不应关闭抽屉，抽屉应保持打开状态，因为我还没有准备好离开。但是，当我单击抽屉中的 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>

这是一个 Ok 方法，但我更愿意将 SystemMenu 代码放在另一个文件中并导入到该文件中，并使用 props 操作 SystemMenu.js 文件中 Menu.js 文件中的关闭函数。如果其他人想继续帮助我，我将不胜感激。

Answer 1

在演示中，他们将所有 ListItems 包装在一个处理关闭抽屉的 div 中：

<div
  tabIndex={0}
  role="button"
  onClick={this.toggleDrawer('left', false)}
  onKeyDown={this.toggleDrawer('left', false)}
>
  {sideList}
</div>

在这段代码中，toggleDrawer是一个设置用于 Draweropen道具的状态的函数。因此，当按下某个键或在 List 的其中一个子项中发生单击时，事件会冒泡到这些处理程序（只要event.stopPropagation()未使用）并更改状态。

在您的代码中，您不希望扩展器的点击关闭抽屉，因此您必须以不同的方式处理这些事件。

您可以onClick向列表添加处理程序：

<ExpansionPanelDetails>
    <List onClick={ () => { /* close the drawer here */ } }>
        <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>

然后，当 ListItems 被点击时，事件将冒泡到 List 的处理程序，它设置状态，关闭 Drawer。

根据您的代码结构，您可能需要修改 Drawer 的实现以将函数传递给您的SystemMenu组件，以便其 List 上的单击处理程序可以设置其父级this.setState的状态，因为它会影响 的状态this，即当前实例该组件的。它不会设置抽屉的状态。

更新：

根据您的评论，我正在添加这一点。

在您的 SystemMenu 组件中： - 接受一个名为closeDrawer. - 使用 props 中的这个函数作为onClickList 上的处理程序

• 在您的菜单组件中：
• 添加一个关闭 Drawer 的函数，让我们暂时调用它closeDrawer。
• 渲染 SystemMenu 时，this.closeDrawer作为 `closeDrawer传递

     <SystemMenu closeDrawer={this.closeDrawer} ...>

这是从 SystemMenu（子组件）中更改父组件 Menu 的本地状态的一种方法。