Material-ui选择分组

Question

我正在尝试使用可切换组中的ListItems创建一个select。我遇到的问题是，切换组时选择菜单关闭，而我无法获取所选项目的值。

handleDropdown = () => {
    this.setState({ showReports: !this.state.showReports })
  }

    <Select
      value={this.state.report}
      onChange={this.handleReportChange}
    >
    <List component="nav">
      <ListItem button>
        <ListItemText inset primary="Sent mail" />
      </ListItem>
    <ListItem button>
      <ListItemText inset primary="Drafts" />
    </ListItem>
    <ListItem button onClick={this.handleDropdown}>
      <ListItemText inset primary="Inbox" />
      {this.state.showReports ? <ExpandLess /> : <ExpandMore />}
    </ListItem>
    <Collapse in={this.state.showReports} timeout="auto" unmountOnExit>
      <List component="div">
        {this.state.reportList.map((report) => (
        <ListItem button value={report.name} key={report.name} className={classes.nested}>
           <ListItemText inset primary={report.displayName} />
        </ListItem>))
       }
     </List>
   </Collapse>
 </List>  
</Select>