如何解决如何在React中的页面导航上折叠手风琴?
我有一个Card Accordion,可以点击整个标题。我一次打5张牌。它可以正常工作,并且可以根据手风琴的打开或关闭状态来改变人字形。 问题是,如果我继续打开一张卡并移至下一页,并且如果我再次回到上一页,则打开的卡保持打开状态。当我移至下一页时,它不会崩溃。 我没有通过defaultActiveKey来使手风琴保持完全折叠状态。
下面是代码。
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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。