如何解决添加drag`n`drop(react-dnd)到Material-UI组件[TreeView]
我有一个问题。我创建了一个 TreeView 并尝试绑定拖放,一切正常,可以移动 TreeItem。但。如果您展开任何 TreeItem 并尝试拖动它,则其所有子 TreeItem 都将随之移动。
如何只拖放一个 TreeItem 而没有它的子 TreeItems????
我的猜测是我需要访问项目树的内部组件。我也不知道该怎么做。
我的代码:
export const PathTreeItem = (props: PathTreeItemProps) => {
const [obj,setobj] = useState<TreeItemType[] | undefined>(undefined)
const [isCurrentRequest,setIsCurrentRequest] = useState(false)
const [{ isDragging },drag] = useDrag({
item: { type: props.obj.description || 'asd' },canDrag: true,collect: (monitor: DragSourceMonitor) => ({
isDragging: monitor.isDragging(),}),})
const treeItemStyle = useMemo(
() => ({
opacity: isDragging ? 0.4 : 1,[isDragging]
)
useEffect(() => {
if (isCurrentRequest && props.obj.parameter_type === 'ABC') {
APIs.get(props.obj.name)
.then(res => {
setobj(res.data)
})
.catch(err => {=
console.error('Error ',err)
})
}
},[isCurrentRequest])
const handleLabelCLick = useCallback(event => {
console.log(event)
setIsCurrentRequest(!isCurrentRequest)
},[])
return (
<TreeItem
ref={drag}
style={treeItemStyle}
nodeId={props.index}
label={props.obj.description}
onLabelClick={handleLabelCLick}
>
{props.obj.parameter_type === 'ABC' ? (
obj ? (
obj.map((value,index) => (
<PathTreeItem
key={props.keyIndex * 100 + index}
keyIndex={index}
index={`${props.index}.${index}`}
obj={value}
/>
))
) : (
<div></div>
)
) : null}
</TreeItem>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。