单击行中的图标时，如何防止离子复选框被选中？

Question

我正在使用 Ionmic 7 和 React 18。我有一个可以检查或编辑的简单项目列表。

<IonList>
  <IonLabel>
    <strong>Select Items</strong>
  </IonLabel>

  {items.map((item) => (
    <IonItem key={item}>
      <IonCheckbox
        slot="start"
        name="selectedItems"
        value={item}
      />
      <IonLabel>{item}</IonLabel>
      <IonIcon
        icon={pencilOutline}
        slot="end"
        onClick={onEditHandler(item)}
        style={{ marginLeft: '10px' }}
      />
    </IonItem>
  ))}
</IonList>

问题是当我单击“编辑”图标（铅笔）时，复选框被选中，并且我的编辑处理程序未被调用。演示在这里 - https://stackblitz.com/edit/an5yjh-i9tnnh?file=src%2FApp.tsx,src%2Fcomponents%2FFormWithChceckboxes.tsx。我想将其添加到处理程序中

e.stopPropagation();

会阻止选中复选框，并且该过程可以继续，但显然不是。

Answer 1

您可以通过向编辑图标添加 z 索引以将其放置在

IonItem

上方来解决该问题，如下所示：

<IonIcon
  icon={pencilOutline}
  slot="end"
  onClick={onEditHandler(item)}
  style={{ marginLeft: '10px', zIndex:10 }}
/>

Answer 2

我建议您使用语法正确的 HTML，通过使用

button

来触发操作 😉

  <IonButton fill="clear" onClick={() => onEditHandler(item)}>
    <IonIcon slot="icon-only" icon={pencilOutline}></IonIcon>
  </IonButton>

这样你就不需要与冒泡效果作斗争了。

https://stackblitz.com/edit/an5yjh-b5wpv5?file=src%2Fcomponents%2FFormWithChceckboxes.tsx