antd中Checkbox.Group阻止冒泡

antdCheckbox.GrouponChange并没event参数
如果复选框所在的区域,有其他操作,点击复选框只想执行复选框的操作
就在checkBox上添加onClick={handleCheckboxClick}

const handleCheckboxClick = (event: any) => {
   event.stopPropagation(); // 阻止冒泡
};

部分代码:

// xxx.tsx
<Checkbox.Group
   style={{display: 'block', overflow: 'auto', flex: 1}}
   value={checkedList}
   onChange={(val) => onSetCheckList(val)}
>
   {state.productList.map((item: TObj, i: number) => (
        <Card key={i} style={{background: i === state.currentIndex ? '#e2f5ff' : undefined, borderRadius: 0}} styles={{body: {padding: 8}}}>
            <div className="flex f-items-center pointer" onClick={() => changeCard(item, i)}>
                    <Checkbox value={`${item.uniqueKey}`} onClick={handleCheckboxClick} />
                         <div className="m-l-8 f-1" style={{marginLeft: 8}}>
                             <div className="flex f-items-center m-b-5">
                                <ZhLabelExtend className="f-1" ellipsisRows={1} label="SKU">{item.sku}</ZhLabelExtend>
                             </div>
                             <div className="flex f-justify-between f-items-center m-b-5">
                                <ZhLabelExtend label="渠道">
                                   <div className="text-left ellipsis font-14">
                                      <ZhTips title={item.sourceName}>{item.sourceName ?? '-'}</ZhTips>
                                   </div>
                                </ZhLabelExtend>
                                <a onClick={(e) => editSource(e, item)}><EditOutlined /></a>
                               </div>
                          <div className="flex f-items-center">
                            <div className="f-1 m-r-8">
                              <Exhibit rIf={!item.isComplete} tagNode="span"><Tag color="orange">未完善</Tag></Exhibit>
                              <Exhibit rIf={item.isComplete} tagNode="span"><Tag color="green">已完善</Tag></Exhibit>
                              <Exhibit rIf={item.hasSensitiveWords} tagNode="span"><Tag color="#d8001b">含侵权词</Tag></Exhibit>
                             </div>
                             <span className="color-red" onClick={(event) => deleteProductItem(event, item)}>
                                <DeleteOutlined />
                             </span>
                          </div>
                   </div>
             </div>
        </Card>
    ))}
</Checkbox.Group>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基础类问题 h5的新特性 html5备注只有一种 DOCTYPE ⽂件类型声明(统 一标准)<!DOCTYPE h...
    h2coder阅读 201评论 1 1
  • antd-design-vue 部分组建参考文档 完整测试代码 NOTICE Node版本为 V12, node-...
    rub1cky阅读 12,770评论 0 1
  • 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放...
    孤魂草阅读 926评论 0 0
  • CSS CSS3 布局属性 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100 !importan...
    53cfdb355418阅读 465评论 0 0
  • 封装组件是为了能在开发过程中高度复用功能和样式相似的组件,以便我们只关注于业务逻辑层的处理,提高开发效率,提高逼格...
    Vintlike阅读 517评论 0 0