Как мы можем сделать так, чтобы другие <ListItem>компоненты были разборными, когда один <ListItem>компонент расширяется под <List>компонент реагирующего материала?

Question

Может кто-нибудь, пожалуйста, помогите мне, когда я бриф в вопросе?фактически в работающем в данный момент приложении мы используем react material ui компоненты для разработки веб-страницы.И в одной ситуации мы использовали <List> компонент пользовательского интерфейса материала, как предложено в https://material -ui.com / demos / lists / с небольшими изменениями в соответствии с требованиями приложения.Сценарий будет следующим: Components Of Component Are Collapsible on page load ">

И теперь, когда я нажимаю CountryOne listiteam, все три элемента списка расширяются, как показано ниже.

Но этого не должно быть.Фактическое ожидание - текущий элемент списка, по которому щелкнули, должен быть расширен, а два других элемента списка должны быть только в разборном состоянии.

Я пробовал что-то с индексом карты только во время итерации списка объектов, но не видел полностью удачи :(. Пожалуйстапосмотрите мой пример кода здесь 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')}