React Drag and Drop：跨组件状态共享问题及解决方案

正如文章摘要所述，在 React Drag and Drop 应用中，跨组件状态共享是一个常见问题。当一个组件中的元素被拖拽到另一个组件时，由于每个组件都有自己独立的状态，直接访问拖拽源组件的状态往往会失败，导致数据丢失。例如，在 onDragStart 中设置的状态，在 onDrop 中可能无法访问。为了解决这个问题，我们需要采用一种方法，使得拖拽事件涉及的组件能够共享状态。

问题分析：组件状态的隔离性

React 组件具有良好的封装性，每个组件都维护着自己的状态（state）。这种状态是组件私有的，默认情况下，其他组件无法直接访问。在 Drag and Drop 应用中，当一个元素从一个组件拖拽到另一个组件时，onDragStart 事件在源组件中触发，而 onDrop 事件在目标组件中触发。由于这两个事件发生在不同的组件中，因此 onDrop 事件无法直接访问 onDragStart 事件中设置的状态。

解决方案：状态提升到父组件

解决跨组件状态共享问题的常用方法是将状态提升到父组件。具体步骤如下：

1. 在父组件中维护拖拽状态： 在父组件中创建状态变量，例如 draggedCard 和 fromLabel，分别用于存储被拖拽的卡片数据和起始列的标签。

   function App() {   const [columns, setColumns] = useState(COLUMNS);   const [draggedCard, setDraggedCard] = useState(null);   const [fromLabel, setFromLabel] = useState('');    // ... }

2. 通过 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>   ); }

3. 在子组件中调用父组件传递的事件处理函数： 在子组件 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>   ); };

4. 在父组件中处理拖拽逻辑： 父组件接收到子组件传递的事件后，就可以根据 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 (     
       {columns.map((column) => (                ))}     
   ); }  export default App;

注意事项

• onDragEnd 事件通常更适合处理拖拽结束后的逻辑，因为它只在被拖拽的元素上触发，而 onDrop 事件会在目标元素上触发。
• 在复杂的 Drag and Drop 应用中，可以使用状态管理库（如 Redux 或 Zustand）来更好地管理全局状态。

总结

通过将状态提升到父组件，我们可以有效地解决 React Drag and Drop 应用中的跨组件状态共享问题。这种方法使得子组件可以方便地访问和修改父组件的状态，从而实现复杂的拖拽逻辑。在实际开发中，应根据应用的具体需求选择合适的状态管理方案，以提高代码的可维护性和可扩展性。