Есть ли способ остановить IonItem срабатывание события onClick при щелчке внутри него интерактивного элемента?

Question

Мой код выглядит так:

           <IonItem
                button
                key={d._id}
                onClick={() => onClick(d._id)}
            >
                <IonLabel>
                    {d.name}
                </IonLabel>
               <IonIcon icon={trashOutline} color="white" onClick={() => { onRemove(d._id) }} />}
            </IonItem>

Я хочу, чтобы поведение не запускало событие onClick IonItem, когда запускается событие onClick IonIcon.

Теперь, когда я нажимаю значок, Ionitem также делать это дело. Пытался вложить IonItems, думая, что вложенный блокирует родительский элемент, но безрезультатно.

Есть ли способ решить эту проблему?

Answer 1

Установите для атрибута onClick вашего IonIcon что-то вроде:

const onClickCallback = (event) => {
  // Do what you want to do
  onRemove(d._id)

  // Prevent the event from bubbling up
  event.stopPropagation();
};

Это должно делать то, что вы хотите.

Answer 2

Я использую Angular с Ioni c.

Я думаю, что вы ищете, чтобы добавить элемент ion-buttons и установить слот в конец. Там вы можете разместить ионную кнопку и установить ее только на иконку.