sortable與React Hooks配合使用

sortable是一個用于實現拖拽排序的庫，而React Hooks是React提供的一種新的特性，用于在函數組件中使用狀態和其他React特性。要將sortable與React Hooks配合使用，可以按照以下步驟進行：

1. 在React項目中安裝sortable庫：

npm install react-sortable-hoc

2. 導入sortable庫和必要的React Hooks：

import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import { useState } from 'react';

3. 使用useState鉤子創建一個狀態來存儲排序后的數據：

const [items, setItems] = useState([1, 2, 3, 4, 5]);

4. 創建一個SortableContainer，并在其中映射排序后的數據：

const SortableList = SortableContainer(() => {
  return (
    <ul>
      {items.map((value, index) => (
        <SortableItem key={`item-${value}`} index={index} value={value} />
      ))}
    </ul>
  );
});

5. 創建一個SortableElement組件，用于渲染每個排序項：

const SortableItem = SortableElement(({ value }) => {
  return <li>{value}</li>;
});

6. 在SortableList組件中使用onSortEnd回調函數來處理拖拽排序結束后的邏輯：

const onSortEnd = ({ oldIndex, newIndex }) => {
  setItems(arrayMove(items, oldIndex, newIndex));
};

7. 最后，在組件中渲染SortableList組件，并將onSortEnd回調函數傳遞給它：

return <SortableList items={items} onSortEnd={onSortEnd} />;

通過以上步驟，您可以將sortable與React Hooks配合使用，實現拖拽排序功能并在函數組件中管理狀態。