antd
中Checkbox.Group
的onChange
并没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>