正如文章摘要所述，在 React Drag and Drop 应用中，跨组件状态共享是一个常见问题。当一个组件中的元素被拖拽到另一个组件时，由于每个组件都有自己独立的状态，直接访问拖拽源组件的状态往往会失败，导致数据丢失。例如，在 onDragStart 中设置的状态，在 onDrop 中可能无法访问。为了解决这个问题，我们需要采用一种方法，使得拖拽事件涉及的组件能够共享状态。
React 组件具有良好的封装性，每个组件都维护着自己的状态（state）。这种状态是组件私有的，默认情况下，其他组件无法直接访问。在 Drag and Drop 应用中，当一个元素从一个组件拖拽到另一个组件时，onDragStart 事件在源组件中触发，而 onDrop 事件在目标组件中触发。由于这两个事件发生在不同的组件中，因此 onDrop 事件无法直接访问 onDragStart 事件中设置的状态。
解决跨组件状态共享问题的常用方法是将状态提升到父组件。具体步骤如下：
在父组件中维护拖拽状态： 在父组件中创建状态变量，例如 draggedCard 和 fromLabel，分别用于存储被拖拽的卡片数据和起始列的标签。
function App() {
const [columns, setColumns] = useState(COLUMNS);
const [draggedCard, setDraggedCard] = useState(null);
const [fromLabel, setFromLabel] = useState('');
// ...
}通过 props 将状态和事件处理函数传递给子组件： 将 draggedCard、fromLabel 以及 handleDragStart 和 handleDrop 函数作为 props 传递给子组件 Panel。
function App() {
// ...
const handleDragStart = (card, label) => {
setDraggedCard(card);
setFromLabel(label);
};
const handleDrop = (label) => {
// Logic to remove card from starting label and add in to the list that is given as a parameter to this function
};
return (
<div>
{COLUMNS.map((column) => (
<Panel
key={column.label}
data={column}
handleDragStart={handleDragStart}
handleDrop={handleDrop}
/>
))}
</div>
);
}在子组件中调用父组件传递的事件处理函数： 在子组件 Panel 中，分别在 onDragStart 和 onDrop 事件中调用父组件传递的 handleDragStart 和 handleDrop 函数，并将相关数据作为参数传递给父组件。
const Panel = ({ data, handleDragStart, handleDrop }) => {
const { title, label, items } = data;
const handleDragOver = (e) => {
e.preventDefault();
};
return (
<div className="w-56">
<h2 className="mb-4">{title}</h2>
<ul className="flex flex-col space-y-4">
{items.map((item) => (
<li key={item.id}>
<button
id={item.id}
className="px-4 py-2 border w-full text-left cursor-grab"
onDragStart={() => handleDragStart(item, label)}
onDrop={() => handleDrop(label)}
onDragOver={handleDragOver}
draggable
>
{item.name}
</button>
</li>
))}
</ul>
</div>
);
};在父组件中处理拖拽逻辑： 父组件接收到子组件传递的事件后，就可以根据 draggedCard 和 fromLabel 来更新状态，实现卡片的移动逻辑。
function App() {
// ...
const handleDrop = (label) => {
// 1. 找到被拖拽的卡片和起始列
const cardToMove = draggedCard;
const sourceColumnLabel = fromLabel;
// 2. 更新 columns 状态，移除起始列的卡片，添加到目标列
setColumns((prevColumns) => {
const updatedColumns = prevColumns.map((column) => {
if (column.label === sourceColumnLabel) {
// 移除起始列的卡片
column.items = column.items.filter(
(item) => item.id !== cardToMove.id
);
} else if (column.label === label) {
// 添加到目标列
column.items = [...column.items, cardToMove];
}
return column;
});
return updatedColumns;
});
// 3. 清空拖拽状态
setDraggedCard(null);
setFromLabel('');
};
// ...
}以下是完整的代码示例，展示了如何使用状态提升来解决 React Drag and Drop 应用中的跨组件状态共享问题。
import React, { useState } from "react";
const COLUMNS = [
{
title: "To Do",
label: "todo",
items: [
{ id: "1", name: "Task 1" },
{ id: "2", name: "Task 2" },
],
},
{
title: "In Progress",
label: "inprogress",
items: [
{ id: "3", name: "Task 3" },
{ id: "4", name: "Task 4" },
],
},
{
title: "Done",
label: "done",
items: [
{ id: "5", name: "Task 5" },
{ id: "6", name: "Task 6" },
],
},
];
const Panel = ({ data, handleDragStart, handleDrop }) => {
const { title, label, items } = data;
const handleDragOver = (e) => {
e.preventDefault();
};
return (
<div className="w-56">
<h2 className="mb-4">{title}</h2>
<ul className="flex flex-col space-y-4">
{items.map((item) => (
<li key={item.id}>
<button
id={item.id}
className="px-4 py-2 border w-full text-left cursor-grab"
onDragStart={() => handleDragStart(item, label)}
onDrop={() => handleDrop(label)}
onDragOver={handleDragOver}
draggable
>
{item.name}
</button>
</li>
))}
</ul>
</div>
);
};
function App() {
const [columns, setColumns] = useState(COLUMNS);
const [draggedCard, setDraggedCard] = useState(null);
const [fromLabel, setFromLabel] = useState("");
const handleDragStart = (card, label) => {
setDraggedCard(card);
setFromLabel(label);
};
const handleDrop = (label) => {
// 1. 找到被拖拽的卡片和起始列
const cardToMove = draggedCard;
const sourceColumnLabel = fromLabel;
// 2. 更新 columns 状态，移除起始列的卡片，添加到目标列
setColumns((prevColumns) => {
const updatedColumns = prevColumns.map((column) => {
if (column.label === sourceColumnLabel) {
// 移除起始列的卡片
column.items = column.items.filter(
(item) => item.id !== cardToMove.id
);
} else if (column.label === label) {
// 添加到目标列
column.items = [...column.items, cardToMove];
}
return column;
});
return updatedColumns;
});
// 3. 清空拖拽状态
setDraggedCard(null);
setFromLabel("");
};
return (
<div className="flex">
{columns.map((column) => (
<Panel
key={column.label}
data={column}
handleDragStart={handleDragStart}
handleDrop={handleDrop}
/>
))}
</div>
);
}
export default App;通过将状态提升到父组件，我们可以有效地解决 React Drag and Drop 应用中的跨组件状态共享问题。这种方法使得子组件可以方便地访问和修改父组件的状态，从而实现复杂的拖拽逻辑。在实际开发中，应根据应用的具体需求选择合适的状态管理方案，以提高代码的可维护性和可扩展性。
以上就是React Drag and Drop：跨组件状态共享问题及解决方案的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
231
收藏
