提示信息

示例简单写? 能拖拽排序就行

朦胧海 已关注

如果你需要一个最基础的拖拽排序实现,那么可以考虑使用react-sortable-hoc。这是一个简化版本的示例,仅包含关键的拖动和排序功能:

首先,安装这个库:

  1. npm install react-sortable-hoc

然后,创建一个可排序列表:

  1. import React, { useState } from 'react';
  2. import { SortableContainer, SortableElement } from 'react-sortable-hoc';
  3. import arrayMove from 'array-move';
  4. const SortableItem = SortableElement(({value}) => <div>{value}</div>);
  5. const SortableList = SortableContainer(({items}) => {
  6. return (
  7. <div>
  8. {items.map((value, index) => (
  9. <SortableItem key={`item-${value}`} index={index} value={value} />
  10. ))}
  11. </div>
  12. );
  13. });
  14. function MyComponent() {
  15. const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);
  16. const onSortEnd = ({oldIndex, newIndex}) => {
  17. setItems(arrayMove(items, oldIndex, newIndex));
  18. };
  19. return <SortableList items={items} onSortEnd={onSortEnd} />;
  20. }
  21. export default MyComponent;

在这个组件中,我们有一个items状态,它是用于表示列表项顺序的数组。当排序结束后,onSortEnd回调将被触发,并且我们在这里更新items的状态以反映新的顺序。

    遇到难题? "AI大模型GPT4.0、GPT" 是你的私人解答专家! 点击按钮去提问......
朦胧海 关注 已关注

最近一次登录:2024-05-25 13:48:33   

暂时还没有签名,请关注我或评论我的文章
×
免费图表工具,画流程图、架构图