解决React拖放中状态更新滞后与跨组件访问问题

import React, { useState } from 'react';
import Panel from './Panel'; // 假设Panel组件在同一目录

// 模拟初始数据结构
const COLUMNS_DATA = [
  { label: 'todo', title: '待办事项', items: [{ id: 'card-1', name: '任务A' }, { id: 'card-2', name: '任务B' }] },
  { label: 'doing', title: '进行中', items: [{ id: 'card-3', name: '任务C' }] },
  { label: 'done', title: '已完成', items: [] },
];

function App() {
  const [columns, setColumns] = useState(COLUMNS_DATA);
  const [draggedCard, setDraggedCard] = useState(null); // 存储被拖拽的卡片对象
  const [fromLabel, setFromLabel] = useState('');     // 存储卡片来源的列标签

  // 处理拖拽开始事件：记录被拖拽的卡片和其来源
  const handleDragStart = (card, label) => {
    setDraggedCard(card);
    setFromLabel(label);
    console.log('Drag started:', card.name, 'from', label);
  };

  // 处理拖放事件：更新columns状态以反映卡片移动
  const handleDrop = (toLabel) => {
    if (!draggedCard || fromLabel === toLabel) {
      // 如果没有被拖拽的卡片，或者拖放到同一列，则不执行操作
      console.log('No card dragged or dropped in the same column.');
      // 清理状态，即使没有移动也重置
      setDraggedCard(null);
      setFromLabel('');
      return;
    }

    console.log('Dropped:', draggedCard.name, 'from', fromLabel, 'to', toLabel);

    setColumns(prevColumns => {
      const newColumns = prevColumns.map(col => {
        if (col.label === fromLabel) {
          // 从原列中移除卡片
          return { ...col, items: col.items.filter(item => item.id !== draggedCard.id) };
        }
        if (col.label === toLabel) {
          // 添加卡片到目标列
          // 确保不重复添加，如果目标列中已存在相同ID的卡片
          const existingItem = col.items.find(item => item.id === draggedCard.id);
          if (existingItem) {
              return col; // 如果已存在，则不添加
          }
          return { ...col, items: [...col.items, draggedCard] };
        }
        return col;
      });
      return newColumns;
    });

    // 清理拖拽状态，为下一次拖拽做准备
    setDraggedCard(null);
    setFromLabel('');
  };

  // 处理拖拽经过事件：阻止默认行为以允许放置
  const handleDragOver = (e) => {
    e.preventDefault();
  };

  return (
    <div style={{ display: 'flex', gap: '20px', padding: '20px', fontFamily: 'Arial, sans-serif' }}>
      {columns.map((column) => (
        <Panel
          key={column.label}
          data={column}
          handleDragStart={handleDragStart}
          handleDrop={handleDrop}
          handleDragOver={handleDragOver}
          // handleDragEnd 也可以在此处传递给Panel，以便在源元素上触发清理逻辑
        />
      ))}
    </div>
  );
}

export default App;

import React from "react";

const Panel = ({ data, handleDragStart, handleDrop, handleDragOver }) => {
  const { title, label, items } = data;

  return (
    // 将onDrop和onDragOver绑定到整个Panel作为放置区域
    <div
      className="w-56 border p-4 rounded-md bg-gray-50 shadow-md" // 示例样式
      onDrop={() => handleDrop(label)} // 放置时调用父组件的handleDrop，并传递当前Panel的label作为目标
      onDragOver={handleDragOver} // 允许放置
    >
      <h2 className="mb-4 text-lg font-semibold text-gray-800">{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 bg-white shadow-sm rounded-md hover:bg-gray-100 transition-colors duration-200" // 示例样式
              onDragStart={(e) => {
                handleDragStart(item, label); // 拖拽开始时调用父组件的handleDragStart，传递卡片和来源label
                // 可选：设置dataTransfer，但对于内部状态管理不是必需的
                // e.dataTransfer.setData("text/plain", item.id);
              }}
              draggable // 使元素可拖拽
            >
              {item.name}
            </button>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Panel;