React onDragEnd没有得到正确的值



我想在它们之间拖放div。所以我有这个功能:

function Block({id,setFormJson, blockType, blockValue,formJsonArray,setIsNewForm}) {
const dragItem = useRef();
const dragOverItem = useRef();
const dragStart = (e, position) => {
dragItem.current = position;
console.log("item - " + dragItem.current)
};
const dragEnter = (e, position) => {
dragOverItem.current = position;
console.log("over - " + dragOverItem.current)
};
const drop = (e) => {
console.log("item - " + dragItem.current + " over - " + dragOverItem.current)
dragItem.current = null;
dragOverItem.current = null;
};

return (
<div className="d-flex align-items-center block-container" id={id} onMouseOver={() => setButtonsClassesName("div-buttons")} onMouseOut={() => setButtonsClassesName("div-buttons invisible")} onDragStart={(e) => dragStart(e, id)} onDragEnter={(e) => dragEnter(e, id)} onDragEnd={drop} draggable>
<Component setTextEditorLeftPosition={setTextEditorLeftPosition} setOpenTextEditor={setOpenTextEditor} id={id} formJsonArray={formJsonArray} setFormJson={setFormJson} blockValue={blockValue} blockType={blockType} setOpenContextualMenu={setOpenContextualMenu} />
</div>
)
}

在DragStart上,dragItem.current返回ac3234b0-1c02-49c7-a8d6-bc3975de0200id,在dragEnter上返回242392d9-a30d-4ba0-9934-88dcadf0aaceid。但在DragEnd上,dragItem.current和dragOverItem.current返回相同的id:ac3234b0-1c02-49c7-a8d6-bc3975de0200

为什么?

部件";块";使用map函数调用。我使用的是React的最后一个版本。

为了修复这个问题,我刚刚在根函数上声明了常量dragItem和dragOverItem,并将其传递给Block函数。

相关内容

  • 没有找到相关文章

最新更新