当一个 <ListItem> 组件在 <List> react material ui 组件下展开时，我们如何确保其他 <ListItem> 组件可折叠？

Question

在当前工作的应用程序中，我们使用react material ui 组件来设计网页。在一种情况下，我们一直在使用 <List> 材料 UI 组件，如 https://material-ui.com/demos/lists/ 中所建议的那样，根据应用程序要求进行了少量更改。场景如下

现在，当我点击 CountryOne listiteam 时，所有三个 listitem 都将展开如下。

但这不应该发生。实际预期是当前点击的列表项应该展开，其他两个列表项应该只处于可折叠状态。

我只在迭代对象列表时尝试了一些带有地图索引的东西，但没有成功。请在这里查看我的示例代码https://stackblitz.com/edit/react-oxmu9x

Answer 1

根据您的示例，这背后的原因是所有三个国家都使用相同的开放属性。尝试这样做，看看它是否有效：

this.state = { open: {countryOne: false, countryTwo: false, countryThree: false}

handleCollapse = (val) => { this.setState(state => ({
      open: Object.assign({}, state.open, {[val]: !state.open[val]})
    }))}

    // countries' ListItem onClick


    onClick={() => handleCollapse('countryOne')}
    onClick={() => handleCollapse('countryTwo')}
    onClick={() => handleCollapse('countryThree')}