如何在 reactstrap 中单击 UncontrollableCollapse 中的图标而不触发折叠? [英] How to click on icons in UncontrollableCollapse in reactstrap and not trigger collapse?

问题描述

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

<li id={`toggle-catalog-item-${item.id}`}><a>一些手风琴</a><div className="icons"><div>+</div><div><TrashIcon/></div>

<不受控制的折叠className =孩子"切换器={`#toggle-catalog-item-${item.id}`}>{menuItemChildren}</不受控制的折叠>

这是一张图片

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

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

解决方案

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

的使用

const [isOpen, setIsOpen] = React.useState(false);const 切换 = () =>setIsOpen(!isOpen);<ul><li id={`toggle-catalog-item-${item.id}`} onClick={toggle}><a>一些手风琴</a><div className="icons"><div onClick={e =>e.stopPropagation()}>+

<div onClick={e =>e.stopPropagation()}><TrashIcon/></div>

<收起isOpen={isOpen}className =孩子"切换器={`#toggle-catalog-item-${item.id}`}>菜单项子项</收起>

I have an accordion, when you click on it the content drops, all works well, but the problem is, i have a delete and an add button, i want to click them and not trigger the accordion. How can i accomplish that? I use UncontrolledCollapse from reactstrap and it has a toggler which is an id of an element.

<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

All of this grayish background is my <li></li> that has an id toggler that will toggle the UncontrolledCollapse that will show all the nested items.

I can achieve it by making only the <a></a>to have a toggle id, the problem is, i want to click on spaces between the icons and have the content drop. So what i want is to only have icons act as a non-toggler I tried doing it by applying z-index:100 to icons div but it doesnt work.

解决方案

This would be a good case to use the controlled collapse. This way you can control when to toggle the accordion. In my example below, pay attention to my usage of 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>

这篇关于如何在 reactstrap 中单击 UncontrollableCollapse 中的图标而不触发折叠?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！