Как открыть выбранный вложенный список в Material-UI?

kevinpaul спросил: 12 мая 2018 в 04:01 в: reactjs

У меня есть код в 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>
    );
  }
}

Когда я нажимаю на первое меню, открывается второе меню. Как открыть только одно меню, а другое останется закрытым?

1 ответ

Michael D ответил: 12 мая 2018 в 04:08

Я думаю, вам нужно будет иметь два отдельных значения в состоянии, чтобы открывать только один за раз.

state = { openMenu1: false, openMenu2: false }

И события click должны запускать только один из них на true / false. Обязательно измените переменную в компоненте Collapse, чтобы использовать соответствующее состояние.