sortable与React Hooks配合使用

sortable是一个用于实现拖拽排序的库，而React Hooks是React提供的一种新的特性，用于在函数组件中使用状态和其他React特性。要将sortable与React Hooks配合使用，可以按照以下步骤进行：

1. 在React项目中安装sortable库：

npm install react-sortable-hoc

1. 导入sortable库和必要的React Hooks：

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

import {
 useState }
     from 'react';
    

1. 使用useState钩子创建一个状态来存储排序后的数据：

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

1. 创建一个SortableContainer，并在其中映射排序后的数据：

const SortableList = SortableContainer(() =>
 {
    
  return (
    <
    ul>

      {
    items.map((value, index) =>
     (
        <
SortableItem key={
`item-${
value}
`}
 index={
index}
 value={
value}
     />

      ))}
    
    <
    /ul>
    
  );

}
    );

1. 创建一个SortableElement组件，用于渲染每个排序项：

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

}
    );

1. 在SortableList组件中使用onSortEnd回调函数来处理拖拽排序结束后的逻辑：

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

}
    ;
    

1. 最后，在组件中渲染SortableList组件，并将onSortEnd回调函数传递给它：

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

通过以上步骤，您可以将sortable与React Hooks配合使用，实现拖拽排序功能并在函数组件中管理状态。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！