Как открыть только одну панель, когда я использую отображение в реагировать на панели

Question

Я создал панель для отображения своих пользователей и отображения их песен под своим именем.У меня проблема в том, что когда я нажимаю на {username}, он открывает все панели аккордеона.Я бы хотел, чтобы он открывал аккордеон только для панели, на которую нажимали.

                          <PanelGroup accordion id="accordion-example">
                                {this.state.allUsersList.map((user, index) => (
                                    <Panel>
                                        <Panel.Heading>
                                            <Panel.Title toggle >
                                                <Button key={index} className="btn-uvideo">{user.Username}</Button>
                                            </Panel.Title>
                                        </Panel.Heading>
                                        <Panel.Body collapsible>
                                            <ListGroup>
                                                {user.songs.map((song, index) => (
                                                    <ListGroupItem key={index}>
                                                        <Button className="btn-video" onClick={() => this.handleSongChange(song)}>
                                                            <p>{song.SongName}</p>
                                                        </Button>
                                                    </ListGroupItem>
                                                ))}
                                            </ListGroup>
                                        </Panel.Body>
                                    </Panel>
                                ))}
                            </PanelGroup>

Answer 1

Я предполагаю, что вы используете React-Bootstrap .Похоже, вам не хватает eventKey:

Уникальный идентификатор для компонента, eventKey делает его отличимым от других в наборе.Как и в случае с React, он должен быть уникальным только среди братьев и сестер компонентов, а не глобально.

https://react -bootstrap.github.io / components / panel / # Panel-accordion

<PanelGroup accordion id="accordion-example">
    <Panel eventKey="1">
        ...
    </Panel>
    <Panel eventKey="2">
        ...
    </Panel>
    <Panel eventKey="3">
        ...
    </Panel>
</PanelGroup>

Предполагая, что ваши имена пользователей уникальны, вы можете использовать это значение для вашего eventKey:

<PanelGroup accordion id="accordion-example">
      {this.state.allUsersList.map((user, index) => (
          <Panel eventKey={user.Username}>
            ...