在 AccordionHeader 中添加不应切换 Accordion 的按钮的最佳方法是什么？

Question

我们使用 React Bootstraps Accordions（版本 2.7.0），我想在手风琴标题中添加一个按钮，它应该执行与切换手风琴不同的操作。

const doSomethingElse = (event) => {
   event.preventDefault();
   event.stopPropagation();
}

<AccordionItem eventKey={eventKey} className={classes}>
   <AccordionHeader>My fancy headline <Button onClick={doSomethingElse}>Click me</Button></AccordionHeader>
   <AccordionBody>{children}</AccordionBody>
</AccordionItem>

如果我在那里添加断点或控制台日志，则永远不会到达我的

doSomethingElse

 方法。我的按钮还有一个未触发的工具提示 - 看起来 AccordionHeader 没有传递点击事件。

我们已经在其他非反应页面上使用 JQuery onMouseEnter 处理程序在手风琴中的按钮上覆盖了这一点，该处理程序将周围的手风琴设置为展开并再次将其重置为在 mouseenter 上折叠，但这非常丑陋并且感觉很hacky。

实现这种行为的正确方法是什么？

Answer 1

Accordion.Header 本身就是一个按钮组件，因此您无法直接实现。相反，您可以尝试为 AccordionHeader 创建自定义组件。

import Accordion from "react-bootstrap/Accordion";
import { useAccordionButton } from "react-bootstrap/AccordionButton";
import Card from "react-bootstrap/Card";

function CustomToggle({ children, eventKey }) {
  const decoratedOnClick = useAccordionButton(eventKey, () =>
    console.log("totally custom!"),
  );

  return (
    <div>
      <div onClick={decoratedOnClick}>{children}</div>
      <button type="button" style={{ backgroundColor: "pink" }}>
        Click me
      </button>
    </div>
  );
}

function Example() {
  return (
    <Accordion defaultActiveKey="0">
      <Card>
        <Card.Header>
          <CustomToggle eventKey="0">My custom header</CustomToggle>
        </Card.Header>
        <Accordion.Collapse eventKey="0">
          <Card.Body>Hello! I'm the body</Card.Body>
        </Accordion.Collapse>
      </Card>
    </Accordion>
  );
}

export default Example;

在这里阅读更多相关信息：

https://react-bootstrap.github.io/docs/components/accordion#custom-toggle