reactjs - 如何在反应拖放中访问被拖动的对象字段?
问题描述
所以基本上我试图在一个简单的游戏中使用 dnd,但我觉得我不太明白一些参数的意义。我有两个组件被用作源和目标。源正在从父级接收单元道具,我希望 Field 组件(目标)知道哪个单元正在被拖动 atm 并在拖放后将其显示在其中。我已经看到我可以在 beginDrag() 中指定一些字段,但我认为可能不是这样。是可能的还是有解决方法?
const BenchTileSource = {
beginDrag(props) {
// Return the data describing the dragged item
const item = { unit: props.unit };
return item;
}
};
const TileBackground = styled.div`
...
`;
function UnitBenchTile({ unit }) {
const [{ isDragging }, drag] = useDrag({
item: { type: TileTypes.BENCH_TILE },
collect: monitor => ({
isDragging: !!monitor.isDragging()
})
});
return unit ? (
<TileBackground ref={drag}>{unit.name}</TileBackground>
) : (
<TileBackground />
);
}
export default BenchTileSource(
TileTypes.BENCH_TILE,
BenchTileSource
)(UnitBenchTile);
import React from "react";
import styled from "styled-components";
import { connect } from "react-redux";
import { TileTypes } from "../dragTypes/TileTypes";
import { useDrop } from "react-dnd";
const mapStateToProps = function(state) {
return {
currentPosition: state.currentPosition,
unitsPositions: state.unitsPositions
};
};
...
function Field({ index, children, dispatch }) {
const unitsPositions = useSelector(
state => state.unitsPositionsReducer.unitsPositions
);
const [{ isOver }, drop] = useDrop({
accept: TileTypes.BENCH_TILE,
drop: monitor => setCurrentPosition([x, y], monitor.getItem()),
collect: monitor => ({
isOver: !!monitor.isOver(),
item: monitor.item
})
});
const setCurrentPosition = (newPosition, unit) => {
if (!unitsPositions[index].unit) {
const result = unitsPositions;
result[index] = { position: newPosition, unit: unit };
dispatch({ type: "UPDATE_UNITS_POSITIONS", result });
}
};
const isRight = (index - 9) % 10 === 0;
const isBottom = index >= 50;
const x = index % 10;
const y = Math.floor(index / 6);
if (isRight && isBottom)
return <FrameBottomRight ref={drop}>{children}</FrameBottomRight>;
else if (isRight) return <FrameRight ref={drop}>{children}</FrameRight>;
else if (isBottom) return <FrameBottom ref={drop}>{children}</FrameBottom>;
else return <Frame ref={drop}>{children}</Frame>;
}
export default connect(mapStateToProps)(Field);
解决方案
react-dnd 的监视器可以访问所有需要的信息。在这种情况下,您想访问目标中当前拖动的源,因此您必须使用 DropTargetMonitor 的方法getItem()
,它将返回item
拖动源的属性中定义的所有属性。如果您已经在项目中定义了一个定义,则在拖动操作开始时无需提供其他字段id
,该字段足以识别正在拖动的项目。
更新 如果你真的想传递额外的字段,你可以简单地通过将项目数据“传播”到一个新对象以及你的 begin 方法中的额外数据来合并项目数据。
return {
...monitor.item,
additional: data
}
推荐阅读
- react-native - 执行 doInBackground() 时出错 - Expo Barcode Scanner
- nginx - 使用 uwsgi 运行烧瓶时出现 Importerror
- java - 在 Mockito 中捕获静态方法调用的参数
- sql-server - IN (Select ...) 在特定数据库中的性能比 IN (values) 差得多
- jquery - 在参数数据中使用特殊字符调用 Ajax 时出现问题
- windows - 如何在 Windows 10 中复制大量文件和文件夹并在过程结束时回答有关替换/跳过/等的所有问题?
- sql - 优化数据库记录获取时间
- python - 用于从页面上的 html 中提取 javascript 变量的 Python 脚本
- python - 将两个矩阵相加(使用方法,不使用 numpy)
- go - 如何从 GO 中的 arango DB 中删除一个顶点并自动删除边缘?