示例简单写? 能拖拽排序就行
如果你需要一个最基础的拖拽排序实现,那么可以考虑使用react-sortable-hoc
。这是一个简化版本的示例,仅包含关键的拖动和排序功能:
首先,安装这个库:
npm install react-sortable-hoc
然后,创建一个可排序列表:
import React, { useState } from 'react';
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import arrayMove from 'array-move';
const SortableItem = SortableElement(({value}) => <div>{value}</div>);
const SortableList = SortableContainer(({items}) => {
return (
<div>
{items.map((value, index) => (
<SortableItem key={`item-${value}`} index={index} value={value} />
))}
</div>
);
});
function MyComponent() {
const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);
const onSortEnd = ({oldIndex, newIndex}) => {
setItems(arrayMove(items, oldIndex, newIndex));
};
return <SortableList items={items} onSortEnd={onSortEnd} />;
}
export default MyComponent;
在这个组件中,我们有一个items
状态,它是用于表示列表项顺序的数组。当排序结束后,onSortEnd
回调将被触发,并且我们在这里更新items
的状态以反映新的顺序。