如何在reactstrap中单击UncontrollableCollapse中的图标而不触发崩溃？

如何解决如何在reactstrap中单击UncontrollableCollapse中的图标而不触发崩溃？

我有一个手风琴，当您单击它时内容下降，一切正常，但是问题是，我有一个删除和一个添加按钮，我想单击它们而不触发手风琴。我该怎么做？我从reactstrap使用UncontrolCollapse，它有一个切换开关，它是元素的ID。

<ul>
  <li id={`toggle-catalog-item-${item.id}`}
  >
    <a>
      Some Accordion
    </a>
    <div className="icons">
      <div>+</div>
      <div><TrashIcon /></div>
    </div>
  </li>
  <UncontrolledCollapse
    className="children"
    toggler={`#toggle-catalog-item-${item.id}`}
  >
    {menuItemChildren}
  </UncontrolledCollapse>
</ul>

Here is an image

所有这些灰色背景都是我的<li></li>，它具有一个ID切换器，该切换器将切换显示所有嵌套项目的UncontrolCollapse。

我可以通过仅使<a></a>具有切换ID来实现它，问题是，我想单击图标之间的空格并放置内容。 所以我只想让图标充当非触发者 我尝试通过将z-index:100应用于icons div来做到这一点，但这没有用。

解决方法

这是使用受控折叠的好例子。这样，您可以控制何时切换手风琴。在下面的示例中，请注意我对stopPropagation

的使用

const [isOpen,setIsOpen] = React.useState(false);

const toggle = () => setIsOpen(!isOpen);

<ul>
  <li id={`toggle-catalog-item-${item.id}`} onClick={toggle}>
    <a>
      Some Accordion
    </a>
    <div className="icons">
      <div onClick={e => e.stopPropagation()}>+</div>
      <div onClick={e => e.stopPropagation()}><TrashIcon /></div>
    </div>
  </li>
  <Collapse
    isOpen={isOpen}
    className="children"
    toggler={`#toggle-catalog-item-${item.id}`}
  >
    Menu Item Children
  </Collapse>
</ul>

,

得到我的答案！只需将切换器从li标记移至div并将position:absolute赋予图标

我将其从此更改为

<ul>
  <li id={`toggle-catalog-item-${item.id}`}
  >
    <a>
      Some Accordion
    </a>
    <div className="icons">
      <div>+</div>
      <div><TrashIcon /></div>
    </div>
  </li>
  <UncontrolledCollapse
    className="children"
    toggler={`#toggle-catalog-item-${item.id}`}
  >
    {menuItemChildren}
  </UncontrolledCollapse>
</ul>

对此

<ul>
  <li style={{position:'relative''}}
  >
//Add div
<div id={`toggle-catalog-item-${item.id}`}>
    <a>
      Some Accordion
    </a>
</div>
//Add position:absolute
    <div className="icons" style={{position:'absolute',bottom:0,left:0}}>
      <div>+</div>
      <div><TrashIcon /></div>
    </div>
  </li>
  <UncontrolledCollapse
    className="children"
    toggler={`#toggle-catalog-item-${item.id}`}
  >
    {menuItemChildren}
  </UncontrolledCollapse>
</ul>