React Bootstrap 2.7.0：如何在AccordionHeader中添加不触发折叠的按钮

React Bootstrap 2.7.0的AccordionHeader默认渲染为<button>元素，其内置的点击事件会优先处理面板折叠逻辑，导致内部嵌套按钮的点击事件、tooltip无法正常触发，即使调用event.stopPropagation()也可能因组件封装的事件处理机制失效。

以下是两种可行的解决方式：

方式一：通过Header的点击事件区分目标元素 #

在AccordionHeader的onClick回调中判断点击源，若为自定义按钮则执行对应操作并阻止折叠逻辑触发：

const doSomethingElse = () => {
  console.log("执行自定义操作");
};

const handleHeaderClick = (event) => {
  // 检测点击目标是否为自定义按钮或其子元素
  if (event.target.closest('.custom-btn')) {
    event.stopPropagation();
    doSomethingElse();
  }
};

<AccordionItem eventKey={eventKey} className={classes}>
  <AccordionHeader onClick={handleHeaderClick}>
    My fancy headline 
    <Button className="custom-btn">Click me</Button>
  </AccordionHeader>
  <AccordionBody>{children}</AccordionBody>
</AccordionItem>

方式二：修改AccordionHeader的渲染类型，手动拆分折叠触发逻辑 #

将AccordionHeader的as属性改为<div>，使用AccordionToggle组件单独处理折叠触发，内部按钮即可独立响应事件：

const doSomethingElse = () => {
  console.log("执行自定义操作");
};

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

这种方式下，AccordionHeader不再是按钮元素，折叠逻辑由AccordionToggle单独承担，内部按钮的点击、tooltip等交互都能正常工作。

内容的提问来源于stack exchange，提问作者peach