fix: 修改表格拖拽组件不能添加点击事件

src/components/DragTable/DragTable.jsx

@@ -7,17 +7,18 @@ import { DndProvider } from 'react-dnd';
 import DraggableBodyRow from './DraggableBodyRow';
 
 const DragTable = props => {
-  const { columns, dataSource, dragCallBack } = props;
+  const { columns, dataSource, dragCallBack, ItemTypes } = props;
   const [data, setData] = useState(null); // 分组后的数组
-
   const components = {
     body: {
       row: DraggableBodyRow,
     },
   };
   useEffect(() => {
-    setData(dataSource);
-  }, []);
+    if (dataSource.length > 0) {
+      setData(dataSource);
+    }
+  }, [dataSource]);
   // 每次拖拽后返回
   useEffect(() => {
     dragCallBack(data);
@@ -56,7 +57,9 @@ const DragTable = props => {
           components={components}
           onRow={(record, index) => ({
             index,
+            ItemTypes,
             moveRow,
+            onClick: () => props.onClick(record),
           })}
           {...props}
         />

src/components/DragTable/DraggableBodyRow.jsx

-import React, { useRef } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import { useDrag, useDrop } from 'react-dnd';
 import './index.less';
 
@@ -9,11 +9,18 @@ const DraggableBodyRow = ({
   className,
   style,
   tableType,
+  ItemTypes,
   ...restProps
 }) => {
+  const [type, setType] = useState('');
   const ref = useRef();
+  useEffect(() => {
+    if (ItemTypes) {
+      setType(ItemTypes);
+    }
+  }, [ItemTypes]);
   const [{ isOver, dropClassName }, drop] = useDrop({
-    accept: 'DraggableBodyRow',
+    accept: type,
     collect: monitor => {
       const { index: dragIndex } = monitor.getItem() || {};
       if (dragIndex === index) {
@@ -31,7 +38,7 @@ const DraggableBodyRow = ({
     },
   });
   const [, drag] = useDrag({
-    type: 'DraggableBodyRow',
+    type,
     item: { index },
     collect: monitor => ({
       isDragging: monitor.isDragging(),