因select事件,点击箭头想展开折叠面板,但下拉框会收起。
我想在点击箭头的时候展开收起折叠面板,点别的地方收起下拉框。
所以在渲染的时候 所有Collapse外放置了一个div。
给div添加事件,判断如果是svg箭头或者svg的父元素span就阻止冒泡。
//展示的个数
const genExtra = (data: any) => {
return <span>{data.length}个</span>;
};
data.map((item)=>{
return <div onClick-={(e:any)=>handleStop(e)}>
<Collapse bordered={false} defaultActiveKey={['1']}>
<Panel header="This is panel header 1" key="1"
extra={genExtra(item?.drivingRouteList)}>
{text}
</Panel>
<Panel header="This is panel header 2" key="2">
{text}
</Panel>
<Panel header="This is panel header 3" key="3">
{text}
</Panel>
</Collapse>
</div>
})
function handleStop(e:any){
if(e.target.nodeName==='svg' || e.target.nodeName === 'span'){
e.stopPropagation()
}
}
这样就可以啦~