javascript - 我想使用 beautiful-dnd 交换 2x2 矩阵元素,但是当我将它们映射时,它会生成 2 个列
问题描述
我想使用 dnd 或漂亮的 dnd 交换两个数组项我需要帮助
const [state, setState] = useState([
["1", "2"],
["3", "4"],
]);
这是我的代码,当我映射它时它会创建两个列,并且在每一列中,它显示 2 个元素,有两个数组,因此它为每个数组创建 2 列我找不到用于交换项目的特定材料它总是从一个中放置一个项目列到其他不交换它们
我想要 1 列,每个元素可以相互交换
期待
<div className="flex justify-center pt-16" >
<DragDropContext onDragEnd={onDragEnd}>
{state.map((el, ind) => (
<Droppable key={ind} droppableId={`${ind}`}>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
style={getListStyle(snapshot.isDraggingOver)}
{...provided.droppableProps}
>
{el.map((item, index) => (
<Draggable
key={item}
draggableId={item}
index={index}
>
{(provided, snapshot) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getItemStyle(
snapshot.isDragging,
provided.draggableProps.style
)}
>
<div className="text-center text-3xl font-bold text-white"
>
{item}
</div>
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
))}
</DragDropContext>
</div>
解决方案
推荐阅读
- laravel - 联系表格变得不起作用并且不会显示错误消息
- javascript - 如何让我的身体全黑?有些是灰色的?
- c# - 3x3 平均滤波器 C
- django - VS 代码的 Django 1.0.2 扩展禁用 html.autoClosingTags
- ruby-on-rails - 如何从 post 表单中获取值并在 rails 控制器中使用它们
- firebase - 基于Firestore请求中的变量颤动放置过滤器
- python - 如何使用 ply 建立 if 条件?
- r - 如何在R中为逻辑回归自举后做混淆矩阵?
- android-studio - 预期 ResolvedDependencyResult 但在尝试同步时发现 DefaultUnresolvedDependencyResult
- reactjs - 反应错误 :: TypeError: 无法读取未定义的属性“0”