美炸天的React拖拽排序组件：一行代码搞定！

2023-12-19 16:06:33

使用 React 构建强大的拖拽排序组件：一份综合指南

在当今快节奏的数字世界中，用户友好性和高效性至关重要。拖拽排序功能使应用程序能够轻松管理和重新排序项目，使其成为任务管理系统、图片库和其他交互式界面的重要组成部分。本文将深入探讨使用 React 构建拖拽排序组件的综合指南，帮助您为您的应用程序创建高效且直观的拖拽体验。

步骤 1：安装依赖项

要开始使用 React 构建拖拽排序组件，我们需要安装必要的依赖项。打开您的终端或命令行，运行以下命令：

npm install react-beautiful-dnd

步骤 2：创建组件

接下来，让我们创建我们的 SortableComponent：

import React, { useState } from 'react';
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';

const SortableComponent = () => {
  const [items, setItems] = useState([
    { id: 'item-1', content: 'Item 1' },
    { id: 'item-2', content: 'Item 2' },
    { id: 'item-3', content: 'Item 3' },
  ]);

  const onDragEnd = (result) => {
    const { source, destination } = result;

    if (!destination) {
      return;
    }

    const newItems = Array.from(items);
    const [reorderedItem] = newItems.splice(source.index, 1);
    newItems.splice(destination.index, 0, reorderedItem);

    setItems(newItems);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable-1">
        {(provided) => (
          <div {...provided.droppableProps} ref={provided.innerRef}>
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided) => (
                  <div
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    ref={provided.innerRef}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default SortableComponent;

步骤 3：使用组件

现在我们已经创建了 SortableComponent，让我们在我们的应用程序中使用它：

import SortableComponent from './SortableComponent';

const App = () => {
  return (
    <div>
      <SortableComponent />
    </div>
  );
};

export default App;