当一个<listitem>组件在<list>反应物料ui组件下展开时，如何确保其他<listitem>组件可折叠？

Question

有人向我介绍问题时，可以帮我吗？实际上，在当前工作的应用程序中，我们使用react material ui组件来设计网页。在一种情况下，我们一直使用https://material-ui.com/demos/lists/中建议的<List>材质ui组件，但根据应用程序的要求几乎没有变化。情况如下

现在，当我单击CountryOne listiteam时，所有三个listitem都会如下扩展。

但这不应该发生。实际期望是当前单击的列表项仅应扩展，而其他两个列表项应仅处于可折叠状态。

我仅在迭代对象列表时尝试过使用map索引进行操作，但未完全看到运气:(。请在此处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')}