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

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

0 голосов
/ 05 июня 2018

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

0 голосов
/ 05 июня 2018

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

state = { openMenu1: false, openMenu2: false }

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

...