问题描述
我遇到了事件冒泡的问题。我正在使用 React DnD Beautiful 对垂直列表进行排序。 我有一个集合列表，每个集合中都有一个嵌套的服务列表。
我可以拖放集合以对它们进行垂直排序，也可以仅在对应集合中拖放服务以对它们进行排序。
当我拖动集合时，一切正常。但是当我尝试拖动服务时，有时我不是抓取一个服务，而是抓取整个集合。它是由于事件冒泡而发生的。通常，我会用 e.stopPropagation() 解决问题，但似乎不起作用。
React DnD Beautiful 使用 {...provided.dragHandleProps} 来处理 onDragStart。我试图自定义它，但它没有用。我想知道，是不是我只是定制错了？
下面是伪代码。
收藏清单
function SortableCollectionsList() {
const styles = useStyles();
const {sortedCollections,onDragEnd} = useSortedCollections()
return (
<div className={"collectionListWrapper"}>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable" direction="vertical">
{(provided,snapshot) => (
// List of all collections
<List
ref={provided.innerRef}
{...provided.droppableProps}
aria-labelledby="nested-list-subheader"
subheader={
<ListSubheader component="div" id="nested-list-subheader">
Drag and drop collections and services
</ListSubheader>
}
className={styles.root}
>
{sortedCollections
.map(({id,name,showName,logo,services: serviceIds},index) =>
<Draggable key={id} draggableId={id} index={index}>
{(provided,snapshot) => (
<>
{/*One collection containing a list of services*/}
<ListItem key={id}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
onDragStart={(e) => {
e.stopPropagation(),provided.dragHandleProps.onDragStart(e),console.log("collections stop propagation")
}}
className={styles.collection}
>
{/*List of services within one collection*/}
<SortableServicesList {...{
serviceIds,collectionId: id,title: name
}}/>
</ListItem>
</>
)}
</Draggable>
)}
{provided.placeholder}
</List>
)}
</Droppable>
</DragDropContext>
</div>
)
}每个集合中的服务
function SortableServicesList({serviceIds,collectionId,title}) {
const {sortedServices,onDragEnd} = useSortedServices(serviceIds,collectionId)
const classes = useStyles();
const [open,setopen] = React.useState(true);
const handleClick = () => {
setopen(!open);
};
return (
// A collection LIST (one list) of services
<List
component="nav"
aria-labelledby="nested-list-subheader"
className={classes.root}
>
<ListItem button onClick={handleClick}>
<DragIndicatorIcon fontSize="small"/>
<ListItemText primary={title}/>
{open ? <ExpandLess/> : <ExpandMore/>}
</ListItem>
<Collapse in={open} timeout="auto" unmountOnExit>
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable" direction="vertical">
{(provided,snapshot) => (
// LIST AS A DROPPABLE CONTAINER FOR THE SERVICES
<List ref={provided.innerRef}
style={getContainerStyle(snapshot.isDraggingOver)}
{...provided.droppableProps}
className="collectionItems"
component="div"
disablePadding
>
{sortedServices
.map(({id,name},index) =>
// A LIST ITEM AS A DRAGGABLE SERVICE
<Draggable key={id} draggableId={id} index={index}>
{(provided,snapshot) => (
<>
<ListItem button
key={id}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
onDragStart={(e) => {
e.stopPropagation(),console.log("services stop propagation")
}}
style={getServiceCardStyle(
snapshot.isDragging,provided.draggableProps.style,)}
className={classes.nested}
>
<DragIndicatorIcon fontSize="small"/>
<ListItemText primary={name}/>
</ListItem>
</>
)}
</Draggable>
)}
{provided.placeholder}
</List>
)}
</Droppable>
</DragDropContext>
</Collapse>
</List>
)
}如您所见，我也很困惑我应该在哪里定义我的自定义事件。现在，我对集合和服务都做了同样的事情，即：
onDragStart={(e) => {
e.stopPropagation(),console.log("services stop propagation")
}}而且它也没有 console.log() 任何东西。
谢谢你的帮助。我实际上是一个初学者，对我来说很困惑，即使它很容易。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）