如何在React中的页面导航上折叠手风琴？

问题描述

我有一个Card Accordion，可以点击整个标题。我一次打5张牌。它可以正常工作，并且可以根据手风琴的打开或关闭状态来改变人字形。问题是，如果我继续打开一张卡并移至下一页，并且如果我再次回到上一页，则打开的卡保持打开状态。当我移至下一页时，它不会崩溃。我没有通过defaultActiveKey来使手风琴保持完全折叠状态。

下面是代码。

@H_404_6@

import { Accordion } from "react-bootstrap";

<Accordion>
  {orders.map((order,index) => {
                return (
                        <Card key={order.orderId} >
                          <Accordion.Toggle
                                onClick={() =>this.toggleAccordian(order.orderId)}
                                as={Card.Header}
                                eventKey={order.orderId}
                            >
                                <div className="text-left">
                                    <h3 className="ParagraphBold mb-1">
                                         {order.fullAddress}
                                    </h3>
                                    <h4> 
                                         {order.orderStatus}
                                    </h4>
                                </div>
                                {order.isCollapSEOpen ?
                                    <img src={chevronUpImg} alt="chevronUpImg" className="chevronupdownImg" />
                                    : <img src={chevronDownImg} alt="chevronDownImg" className="chevronupdownImg" />
                                }
                            </Accordion.Toggle>
                            <Accordion.Collapse
                                eventKey={order.orderId}
                            >
                                <Card.Body>
                                   //----other code 
                                </Card.Body>
                            </Accordion.Collapse>
                        </Card>
                      );
  })}
</Accordion>

Image of issue - On navigation - opened card stays open when page change and come back to that page again.

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

accordion react-bootstrap reactjs reactjs