Question

我想在React中使用Material-UI中的List，其中列表也有嵌套项。我有这样的代码：

<List>
    {this.state.categories.map(category => {
        return (
            <ListItem key={category.categoryID} 
                      primaryText={category.name}
                      nestedItems={[
                          category.subcategories.map(subcat => {
                              return (
                                  <ListItem key={subcat.subcatID}
                                            primaryText={subcat.name} />
                              )
                          })
                      ]} />
        )
    })}
</List>

虽然它的当前形式有效，但它具有List的默认设置，这意味着我可以扩展多个ListItems以查看其nestedItems。但是，我希望有类似手风琴的行为。用户可以一次只展开一个ListItem以查看其nestedItems。因此，如果一个已经展开并且用户单击以展开另一个，则应该关闭已展开的第一个，并且应该展开新按下的那个。知道如何使用Material UI中的List元素实现这一目标吗？

Answer 1

使用SelectableList而不是使用List，并以相同的方式定义ListItem。控制SelectableList使用属性open与每个主要列表项的打开/关闭行为。

查看此 DOC 页面的最后一个示例。

<强>代码：

在状态变量中定义一个值：

value: '';  //no list will be in open state initially

使用SelectableList定义value属性：

<SelectableList value={this.state.value}>
    <ListItem

        value = {1}
        open = {this.state.value == 1? true: false}
        onClick = {() => this._click(1)}

        primaryText="Brendan Lim"
        primaryTogglesNestedList={true}

        nestedItems={[
            <ListItem
                value='a'
                primaryText="Grace Ng"
            />,
        ]}
    />
    <ListItem

        value = {2}
        open = {this.state.value == 2? true: false}
        onClick = {() => this._click(2)}

        primaryText="Brendan Lim"
        primaryTogglesNestedList={true}
        nestedItems={[
            <ListItem
                value='b'
                primaryText="Grace Ng"
            />,
        ]}
    />
</SelectableList>


_click(value){
   this.setState({value});
}

Imp Points：

1-仅在主ListItem上定义onClick，而不是在子项目上定义onClick。

2- Inside _onClick传递您使用主ListItem定义的相同值。

3-仅在主要列表项上定义开放属性，而不是在子项目上。

4-如果状态值与该列表项的值相同，则将条件置于open属性中，然后打开该列表并关闭所有其他列表。

Answer 2

一种方法是跟踪selectedItem，然后只渲染其嵌套项。类似的东西：

<List>
  {this.state.categories.map(category =>
    <ListItem
      key={category.categoryID}
      primaryText={category.name}
      nestedItems={
        category.categoryID === selectedItem ? [
          category.subcategories.map(subcat =>
            <ListItem key={subcat.subcatID} primaryText={subcat.name} />
          ),
        ] : []
      }
    />
  )}
</List>

如何使材质UI列表只打开一个列表项？

2 个答案: