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

IT技术 reactjs accordion reactstrap
2021-04-29 07:41:08

我有一个手风琴，当你点击它时内容会下降，一切正常，但问题是，我有一个删除和一个添加按钮，我想点击它们而不触发手风琴。我怎样才能做到这一点？我使用 reactstrap 中的 UncontrolledCollapse ，它有一个切换器，它是元素的 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>

这是一张图片

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

我可以通过只设置<a></a>一个切换 ID来实现它，问题是，我想点击图标之间的空格并让内容下降。 所以我想要的是只让图标充当非切换器， 我尝试通过申请z-index:100 来做到这一点，icons div但它不起作用。

2个回答

这将是使用受控折叠的好例子。这样您就可以控制何时切换手风琴。在我下面的例子中，注意我的用法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>
其它你可能感兴趣的问题
上一篇在传单中使用 react-leaflet-draw 创建新图层之前删除图层 下一篇然后在执行所有异步调用之前执行函数