【React工作记录九十】ant design table实现上下行拖拽功能(类组件)

原创于 2023-03-21 15:24:31 发布 · 475 阅读

前端项目工作实战专栏收录该内容

146 篇文章 ¥39.90 ¥99.00

订阅专栏

超级会员免费看

本文记录了使用React和Ant Design实现表格上下行拖拽功能的详细步骤，从无从下手到逐步解决问题的过程。通过引入相关类组件，找准数据并进行赋值，最后在确定按钮中处理数据调用接口，成功实现拖拽效果。

前言

最好的种树是十年前,其次是现在。歌谣每天一个前端小知识提醒你改好好学习了知乎博主 csdn博主 b站博主放弃很容易但是坚持一定很酷我是歌谣喜欢就一键三连咯你得点赞是对歌谣最大的鼓励微信公众号关注前端小歌谣

起始

首先刚开始知道要书写一个这样的功能我的内心是比较崩溃的完全没有思路
然后就打开官网的文档进行观看

开始

一开始准备写打开官网的一个文档是4.0的看起来也是一脸的蒙蔽
接着找到3的一个文档

代码部分

import { Table } from 'antd';
import { DndProvider, DragSource, DropTarget } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import update from 'immutability-helper';
 
let dragingIndex = -1;
 
class BodyRow extends React.Component {
  render() {
    const { isOver, connectDragSource, connectDropTarget, moveRow, ...rest

标签