如何在 react-bootstrap 中打开多个手风琴选项卡？

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

Accordion 组件旨在一次扩展一张卡。 要实现打开多个标签的效果，需要像这样使用多个Accordion：

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;

它工作得非常好，我能够实现同时打开两个或多个选项卡的行为，这是使用单个 Accordion 无法实现的。 希望这可以帮助。

Answer 4

我通过在 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}

Answer 5

我也有这个问题，我通过使用reactstrap库的UncontrolledAccordion解决了它

这是一个例子：

// ** 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>

注意：您不能用这样的手风琴控制手风琴项的state，用户需要刷新页面或自行关闭手风琴项。