Question

我在React中有一个代码，其中有两个具有嵌套菜单的列表菜单。

class Nav extends React.Component {
  state = { open: false };

  handleClick = () => {
    this.setState({ open: !this.state.open });
  };

  render() {
    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <List
          component="nav"
        >
          <ListItem button onClick={this.handleClick}>
            <ListItemText primary="Files" />
            {this.state.open ? <ExpandLess /> : <ExpandMore />}
          </ListItem>
          <Collapse in={this.state.open} timeout="auto" unmountOnExit>
            <List component="div" disablePadding>
              <ListItem button className={classes.nested}>
                <ListItemText primary="Providers" />
              </ListItem>
              <ListItem button className={classes.nested}>
                <ListItemText primary="Insurance Companies" />
              </ListItem>
            </List>
          </Collapse>
          <ListItem button onClick={this.handleClick}>
            <ListItemText primary="Utilities" />
            {this.state.open ? <ExpandLess /> : <ExpandMore />}
          </ListItem>
          <Collapse in={this.state.open} timeout="auto" unmountOnExit>
            <List component="div" disablePadding>
              <ListItem button className={classes.nested}>
                <ListItemText primary="Excel Templates" />
              </ListItem>
              <ListItem button className={classes.nested}>
                <ListItemText primary="Upload File" />
              </ListItem>
            </List>
          </Collapse>
        </List>
      </div>
    );
  }
}

单击第一个菜单时，第二个菜单也会打开。我如何只打开一个菜单而另一个菜单仍然关闭？

Answer 1

我认为你需要在状态中有两个单独的值才能一次只打开一个

state = { openMenu1: false, openMenu2: false }

点击事件应该只触发其中一个转到true / false。确保更改Collapse组件中的变量以使用相应的状态

如何在Material-UI上打开选定的嵌套列表？

1 个答案: