正如文章摘要所述，在 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;注意事项
- onDragEnd 事件通常更适合处理拖拽结束后的逻辑，因为它只在被拖拽的元素上触发，而 onDrop 事件会在目标元素上触发。
- 在复杂的 Drag and Drop 应用中，可以使用状态管理库（如 Redux 或 Zustand）来更好地管理全局状态。
总结
通过将状态提升到父组件，我们可以有效地解决 React Drag and Drop 应用中的跨组件状态共享问题。这种方法使得子组件可以方便地访问和修改父组件的状态，从而实现复杂的拖拽逻辑。在实际开发中，应根据应用的具体需求选择合适的状态管理方案，以提高代码的可维护性和可扩展性。
