React-dnd模块中getDropResult()无法得到目标值

在用React-dnd模块做项目的时候,在endDrop()函数里面用getDropResult()无法得到想要的目标值,
看了官方文档,以及示例代码,均是无法找到问题所在,
跟示例的思路及写法几乎一样,根据相关文档,如下
React-dnd模块中getDropResult()无法得到目标值_第1张图片
在这里插入图片描述
在这里插入图片描述
具体情景如下
我有三个组件ABC, A是B的父组件,C与AB独立,C作为被拖动组件,AB作为接受的组件,

在C的drag的spec配置中的endDrag()里面写到,console.log(‘getDropResult’, monitor.getDropResult());
在A、Bd的drop的spec配置中的drop()里写到,return{xxx:1}即返回一个对象
根据文档以及示例,只要我把C拖进了A或者B,都会触发drop里面的return,然后这个return的对象会在C的endDrag里面通过monitor.getDropResult()得到,

但是我并没有得到目标值,只得到了一个对象(名字是consolelog里面我编的),里面有dropEffect和id两个属性
React-dnd模块中getDropResult()无法得到目标值_第2张图片

通过monitor来得到其他的属性,比如monitor.getItem()也能得到这个函数想要的值,换言之,就偏偏这个monitor.getDropResult()函数除了问题,无法实现官方文档说的那个功能,
我查了github的讨论区,也没有人讨论这个问题,而且我比较确定,我没有拼写错误,也没有逻辑错误,验证了很多方法后觉得应该是当前版本的bug,因为示例的代码用的是"react-dnd": “^2.5.4”,而我当前用的是 “react-dnd”: " ^14.0.2",差的比较远。

经过测试发现
drop(){}中monitor.getDropResult()只能得到已经有经过上一级drop()后return的元素
但是只能通过事件冒泡,比如外部的组件drop到子组件,子组件drop()函数return一个对象,在父组件drop()里可以通过monitor.getDropResult()得到,但是在子组件得不到任何对象,因为没有上一级给他return,所以子组件的monitor.getDropResult()能够得到一个null
在没有父子关系的情况下,被拖动元素的endDrag里用monitor.getDropResult()得到的不是null而是{dropEffect: “move”, id: undefined}

比如此处我A的drop()里写return{A:1}B写return{B:2}都各自打印输出monitor.getDropResult(),然后把C拖到B中,可以看到B的是null,A的是{B:2}
如果拖到A中非B处,那根本不会触发B的drop,然后A也会输出得到null,
这两种情况下C的endDrag()里面monitor.getDropResult()得到的不是null而是{dropEffect: “move”, id: undefined}

但是如果一个组件既是drag又是drop ,那么drag中endDrag(){}中getDropResult()就能得到drop()返回的对象
换言之,组件中endDrag的getDropResult()只能得到自己本身drop()里return 的对象,这和之前版本都不同,应该是版本bug

所以此处无法得到想要的数据
当我C设定为既可以drag又可以drop的时候,拖动C移出,又放置回C,就可以得到自身drop()return的对象了

为了解决这个问题,只能放弃使用getDropResult(),直接在B组件里用getItem,来获取部分相关数据,再从props里面得到另一部分,整体通过redux进行更新操作

你可能感兴趣的:(React_music项目,记录贴,总结帖,javascript,react)