使用 semantic-ui-react 手风琴时如何 expand/collapse 部分标题

Question

我有一个手风琴标题，它由克拉、一些文本和 div 以及其他一些东西组成。我希望手风琴仅在用户单击克拉或文本时展开，而不是额外的 div。单击 div 将完全执行其他操作。

我注意到在基础 Semantic-UI 中，您可以指定一个 CSS 选择器来触发，但这似乎 JQuery 特定并且在反应版本中不可行。

这可能吗？

<Accordion.Title
   active={activeIndex === 0} index={0} onClick={this.handleClick}
>
  <Icon name="dropdown" />
  <span className="name">{data.name}</span>
  <div>some extra junk - don't expand on this</div>
</Accordion.Title>

Answer 1

您的 onClick 事件附加到 Accordion.Title 本身。这意味着当您单击该组件时，您的 handleClick 函数将会触发。如果您希望在单击 Icon 时触发 handleClick 函数，那么您需要将处理函数移至该组件。

<Icon 
  name='dropdown'
  onClick={this.handleClick}
/>

使用 semantic-ui-react 手风琴时如何 expand/collapse 部分标题

How to expand/collapse on partial title when using the semantic-ui-react accordion

semantic-ui-react