Reactjs 如何在单击行中的图标时避免选中ionic 复选框

发布于01月10日

我正在使用Ionmic 7和Reaction 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();

将阻止复选框被选中，该过程可以继续，但显然不会.

Reactjs 如何在单击行中的图标时避免选中ionic 复选框

推荐答案

Reactjs相关问答推荐

ReferenceError：未在Redux组件中定义窗口

使用Reaction-Hook-Form时未激发React.js onBlur事件

为什么我的react虚拟化列表不显示滚动条，除非我确保高度低于rowCount*rowHeight？

需要特定的数学函数来标准化动画持续时间

当useEffect和onClick处理程序都调用useCallback函数时，有没有办法对useEffect产生额外的影响？

如何使用TouchStart/TouchEnd在Table ReactJS中交换位置？

useState导致对函数的无休止调用

透明MOV文件未出现在我的React网页中

点击页脚链接时，如何更改ReactJS导航栏中的活动菜单项(样式为Tailwind CSS)？

Github 操作失败：发布 NPM 包

如何删除 bootstrap 手风琴上的边框

ReactJS中使用setState方法时，Context内部的State未进行更新

如何修改 react/jsx-no-useless-fragment 规则以允许 <>{children}

Cypress 组件测试不渲染react 组件(但它的内容)

ReactJS：useMemo 钩子修复了我的无限重新渲染问题而不是 useEffect

在表格中显示具有自定义声明的用户状态

如何使用 babel 将 SVG 转换为 React 组件？

如何使用 useEffect 和 if 语句 React

Rtk 查询无效标签不使数据无效

根据计算 ReactJs 更新输入字段