React Drag and Drop：跨组件状态管理的解决方案

本文针对React拖拽应用中，handleDrop函数无法访问handleDragStart中更新的selectedCard状态的问题，提供了基于父组件状态提升的解决方案。通过将拖拽状态管理提升到父组件，并利用onDragStart和onDrop事件进行跨组件通信，实现了拖拽卡片在不同组件间移动的功能，并给出了详细的代码示例。

在React构建的拖拽应用中，经常会遇到需要在不同组件之间共享拖拽状态的情况。一个常见的场景是，在handleDragStart函数中设置了某个状态变量（例如selectedCard），但在handleDrop函数中却无法访问到该变量，导致拖拽操作无法正确完成。这通常是由于React组件之间状态的隔离性造成的。每个组件都有自己的状态，无法直接访问其他组件的状态。

要解决这个问题，需要将状态提升到父组件进行管理，并通过props将状态和处理函数传递给子组件。

状态提升的实现步骤

1. 在父组件中定义状态： 在父组件中，使用useState Hook定义需要共享的状态变量，例如draggedCard和fromLabel。

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

   登录后复制

2. 定义处理函数： 在父组件中定义处理拖拽开始和结束的函数，例如handleDragStart和handleDrop。这些函数将负责更新父组件的状态。

   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
       // 在这里实现卡片移动的逻辑
     };
   
     // ...
   }

   登录后复制

3. 将状态和处理函数作为props传递给子组件： 将状态变量和处理函数作为props传递给需要访问这些状态的子组件（例如Panel组件）。

   

   乾坤圈新媒体矩阵管家

   新媒体账号、门店矩阵智能管理系统

   17

   查看详情

   function App() {
     // ...
   
     return (
       <div>
         {COLUMNS.map((column) => (
           <Panel
             key={column.label}
             data={column}
             handleDragStart={handleDragStart}
             handleDrop={handleDrop}
           />
         ))}
       </div>
     );
   }

   登录后复制

4. 在子组件中使用props： 在子组件中，通过props访问父组件传递的状态和处理函数。

   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)} // 传递item和label
                 onDrop={() => handleDrop(label)} // 传递label
                 onDragOver={handleDragOver}
                 draggable
               >
                 {item.name}
               </button>
             </li>
           ))}
         </ul>
       </div>
     );
   };

   登录后复制

代码示例：

以下是完整的代码示例，展示了如何使用状态提升来解决React拖拽应用中的状态共享问题。

import { useState } from "react";

const COLUMNS = [
  {
    title: "Column 1",
    label: "column1",
    items: [
      { id: "1", name: "Item 1" },
      { id: "2", name: "Item 2" },
    ],
  },
  {
    title: "Column 2",
    label: "column2",
    items: [
      { id: "3", name: "Item 3" },
      { id: "4", name: "Item 4" },
    ],
  },
];

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) => {
    // Logic to remove card from starting label and add in to the list that is given as a parameter to this function
    console.log("Dropped on:", label);
    console.log("Dragged card:", draggedCard);
    console.log("From label:", fromLabel);

    //TODO: Implement the logic to update the columns state to reflect the card movement
  };

  return (
    <div>
      {COLUMNS.map((column) => (
        <Panel
          key={column.label}
          data={column}
          handleDragStart={handleDragStart}
          handleDrop={handleDrop}
        />
      ))}
    </div>
  );
}

export default App;

注意事项：

• 确保正确传递handleDragStart和handleDrop函数，并根据需要传递其他参数（例如item和label）。
• 在handleDrop函数中，需要实现卡片移动的逻辑，更新父组件的状态，以反映卡片在不同列之间的移动。
• 可以使用onDragEnd事件来代替onDrop，以便在拖拽结束后触发事件，而不是在拖拽到目标元素上时触发。

总结：

通过将状态提升到父组件，可以有效地解决React拖拽应用中跨组件状态共享的问题。这种方法可以确保所有组件都可以访问到最新的拖拽状态，从而实现复杂的拖拽功能。记住，清晰地定义状态和处理函数，并正确地将它们作为props传递给子组件，是实现状态提升的关键。

以上就是React Drag and Drop：跨组件状态管理的解决方案的详细内容，更多请关注php中文网其它相关文章！