Как развернуть / свернуть частичное заглавие при использовании аккордеона semantic-ui-реагировать

Question

У меня есть название аккордеона, которое состоит из карата, некоторого текста и div с некоторыми другими вещами. Я хочу, чтобы аккордеон расширялся только тогда, когда пользователь нажимает на карат или текст, но не на дополнительный div. Нажатие на div сделает что-то еще полностью.

Я заметил, что в базовом семантическом пользовательском интерфейсе вы можете указать селектор 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 срабатывает.Если вы хотите, чтобы функция handleClick запускалась при нажатии Icon, вам нужно вместо этого переместить функцию-обработчик на этот компонент.

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