reactjs - 当点击其中的可点击元素时，有没有办法阻止 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>

当 IonIcon 的 onClick 事件被触发时，我想要的行为不是触发 IonItem 的 onClick 事件。

现在，当我按下图标时，Ionitem 也在做这件事。尝试嵌套 IonItems 认为嵌套的 IonItems 会阻止父级，但无济于事。

有没有办法解决这个问题？

标签： reactjsionic-framework

Answer 1

将onClick您的属性设置为IonIcon：

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

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

这应该做你想要的。