添加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 (将#修改为@）