如何在反应引导中打开多个手风琴选项卡?

Question

如果可能的话，我正在尝试打开多个手风琴.当前正在使用react-bootstrap库。

以下是我的实现：

<Accordion>
{data.rows.map((item, index) => {
return (
<Card
style={{
border: "none",
marginTop: "1em",
borderBottom: "1px solid #f1f1f1",
}}
>
<Card.Header
style={{ background: "transparent", padding: "0.75em 0" }}
>
<Row>
<Col lg="10" sm xs="9" style={{ alignSelf: "center" }}>
<p
className="cardtitle"
style={{ fontWeight: "600" }}
>
{item.title}
</p>
</Col>
<Col style={{ textAlign: "right" }} xs sm>
{" "}
<ContextAwareToggle eventKey={index}>
+
</ContextAwareToggle>
</Col>
</Row>
</Card.Header>
<Accordion.Collapse eventKey={index}>
<Card.Body>
<p className="cardcontent">{item.content}</p>
</Card.Body>
</Accordion.Collapse>
</Card>
);
})}{" "}
</Accordion>
...

function ContextAwareToggle({ children, eventKey, callback }) {
const currentEventKey = useContext(Fifth);
const decoratedOnClick = useAccordionToggle(
eventKey,
() => callback && callback(eventKey)
);
const isCurrentEventKey = currentEventKey === eventKey;
console.log(currentEventKey);
return (
<button
type="button"
className="accordianButton"
// style={{ backgroundColor: isCurrentEventKey ? "pink" : "lavender" }}
style={{
backgroundColor: "transparent",
fontSize: "1.8em",
fonWeight: "700",
border: "transparent",
color: "green",
}}
onClick={decoratedOnClick}
>
{isCurrentEventKey ? "-" : "+"}
</button>
);
}

以下是我获得代码参考的链接：https://react-bootstrap.github.io/components/accordion/

另外，如果不是手风琴，那么请建议任何其他组件.一直在尝试在我的项目中创建一个常见问题解答模板。

谢谢

Answer 1

手风琴组件设计为一次扩展一张卡。要实现打开多个选项卡的效果，您需要使用多个手风琴，如下所示：

import React from "react";
import { Accordion, Card, Button } from "react-bootstrap";
const tabs = [
{ id: 1, label: "Tab 1", description: "Content of Tab 1" },
{ id: 2, label: "Tab 2", description: "Content of Tab 2" },
{ id: 3, label: "Tab 3", description: "Content of Tab 3" }
];
export default function App() {
return (
<div className="App">
{tabs.map(tab => (
<Accordion key={tab.id} defaultActiveKey={tab.id}>
<Card>
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey={tab.id}>
{tab.label}
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey={tab.id}>
<Card.Body>{tab.description}</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
))}
</div>
);
}

下面是一个代码沙箱 https://codesandbox.io/s/react-bootstrap-multiple-accordion-tabs-oboks

Answer 2

更新：

现在可以在打开另一个选项卡时保持手风琴选项卡打开。这可以使用alwaysOpen属性来实现：

<Accordion alwaysOpen>
<Accordion.Item eventKey="1">
<Accordion.Header>
Title
</Accordion.Header>
<Accordion.Body>
Test Body
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="2">
<Accordion.Header>
Title
</Accordion.Header>
<Accordion.Body>
Test Body
</Accordion.Body>
</Accordion.Item>
</Accordion>

文档在这里

Answer 3

我在应用程序中也遇到了类似的问题。由于手风琴的固有性质，在打开其他标签时不可能保持上一个标签打开。 最后，我使用如下所示的循环为每个单独的选项卡创建了多个手风琴.

import React, { Component } from "react";
import { Accordion, Card, Button } from 'react-bootstrap';
class ItemsList extends Component {
constructor(props) {
super(props);
}
render() {
const items = this.props.itemList;
return (<div>
{items.map((item) => {
return (
<Accordion key={item.itemNumber} id={item.itemNumber}>
<Card>
<Card.Header>
<Accordion.Toggle as={Button}
variant="link"
eventKey={item.itemNumber}>
</Accordion.Toggle>
{item.itemName}
</Card.Header>
<Accordion.Collapse eventKey={item.itemNumber}>
<Card.Body>
{item.itemDescription}
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
);
})}
</div>);
}
export default ItemsList;

它工作得很好，我能够实现同时打开两个或多个选项卡的行为，这是使用单个手风琴无法实现的.希望这有帮助。

Answer 4

我也遇到了这个问题，我通过使用Reactstrap库的Uncontrolled Accordion解决了它

下面是一个示例：

// ** Reactstrap Imports
import {
UncontrolledAccordion,
AccordionBody,
AccordionHeader,
AccordionItem,
Label
} from "reactstrap";
// ** Example Component layout in the render() function
<UncontrolledAccordion stayOpen style={{ border: "none", width: "95%" }}>
<Label>ACCORDION MENU</Label>
<AccordionItem>
<AccordionHeader targetId="1">Test 1</AccordionHeader>
<AccordionBody accordionId="date">
<Label className="form-label" for="default-picker">
Test 1
</Label>
</AccordionBody>
</AccordionItem>
<AccordionItem>
<AccordionHeader targetId="2">Test 2</AccordionHeader>
<AccordionBody accordionId="date">
<Label className="form-label" for="default-picker">
Test 2
</Label>
</AccordionBody>
</AccordionItem>
<AccordionItem>
<AccordionHeader targetId="3">Test 3</AccordionHeader>
<AccordionBody accordionId="date">
<Label className="form-label" for="default-picker">
Test 3
</Label>
</AccordionBody>
</AccordionItem>
</UncontrolledAccordion>

注意：您无法像这样使用手风琴控制手风琴项的状态，用户需要刷新页面或自行关闭手风琴项。

Answer 5

我通过在getElementsByClassName上使用for循环来实现这一点。不要忘记将其绑定到组件的构造函数中，否则它将不起作用。

constructor(props) {
super(props)
this.showAllAccordionTabs = this.showAllAccordionTabs.bind(this)
}
showAllAccordionTabs() {
const getCollapsedAccordionSections = document.getElementsByClassName(
"collapse"
)
for (var i = 0; i < getCollapsedAccordionSections.length; i++) {
getCollapsedAccordionSections[i].classList.add("show")
}
}

然后添加 onClick 事件

onClick={this.showAllAccordionTabs}