返回

探索 React + TypeScript 开发：任务卡片拖拽移动

前端







## 引言

在任务管理系统中，任务卡片拖拽移动是一个常见且重要的功能。它允许用户轻松地重新排列任务的顺序，并将其移动到不同的任务列表中。在本文中，我们将探讨如何使用 React 和 TypeScript 来构建一个可视化、交互式的任务管理系统，让您轻松实现任务的移动和管理。

## 构建 React + TypeScript 任务管理系统

首先，我们需要创建一个新的 React 项目。我们可以使用以下命令：

npx create-react-app my-task-manager


接下来，我们需要安装 TypeScript 支持。我们可以使用以下命令：

npm install --save typescript @types/react @types/react-dom


然后，我们需要创建一个 `src/components` 目录，并在其中创建 `TaskList.tsx` 和 `TaskCard.tsx` 两个 TypeScript 文件。

// src/components/TaskList.tsx
import React from "react";
import { TaskCard } from "./TaskCard";

interface TaskListProps {
tasks: Array<{ id: string; title: string; description: string }>;
onTaskMove: (taskId: string, newListIndex: number) => void;
}

const TaskList: React.FC = ({
tasks,
onTaskMove,
}) => {
return (


{tasks.map((task) => (
<TaskCard
key={task.id}
task={task}
onTaskMove={onTaskMove}
/>
))}

);
};

export default TaskList;

// src/components/TaskCard.tsx
import React, { useState } from "react";
import { Draggable } from "react-beautiful-dnd";

interface TaskCardProps {
task: { id: string; title: string; description: string };
onTaskMove: (taskId: string, newListIndex: number) => void;
}

const TaskCard: React.FC = ({
task,
onTaskMove,
}) => {
const [isDragging, setIsDragging] = useState(false);

const handleDragStart = () => {
setIsDragging(true);
};

const handleDragEnd = (result: any) => {
setIsDragging(false);

if (!result.destination) {
  return;
}

onTaskMove(task.id, result.destination.index);

};

return (
<Draggable draggableId={task.id} index={0} isDragDisabled={isDragging}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
className="task-card"
>
{task.title}


)}

);
};

export default TaskCard;


然后，我们需要在 `src/App.tsx` 文件中使用这些组件：

// src/App.tsx
import React, { useState } from "react";
import { TaskList } from "./components/TaskList";

const App = () => {
const [tasks, setTasks] = useState([
{ id: "1", title: "Task 1", description: "This is task 1." },
{ id: "2", title: "Task 2", description: "This is task 2." },
{ id: "3", title: "Task 3", description: "This is task 3." },
]);

const onTaskMove = (taskId: string, newListIndex: number) => {
const task = tasks.find((task) => task.id === taskId);
if (!task) {
return;
}

tasks.splice(tasks.indexOf(task), 1);
tasks.splice(newListIndex, 0, task);

setTasks([...tasks]);

};

return (


<TaskList tasks={tasks} onTaskMove={onTaskMove} />

);
};

export default App;


最后，我们需要在 `public/index.html` 文件中添加以下内容：



这样，我们就完成了 React + TypeScript 任务管理系统的构建。您可以运行以下命令来启动项目：

npm start


然后，您就可以在浏览器中看到任务管理系统了。您可以拖动任务卡片来重新排列任务的顺序，也可以将任务卡片移动到不同的任务列表中。

## 结语

在本文中，我们探讨了如何使用 React 和 TypeScript 来构建一个可视化、交互式的任务管理系统，让您轻松实现任务的移动和管理。希望本文对您有所帮助。如果您有任何问题，请随时留言。