实现了Transfer框内上下箭头移动项的功能

src/demo.jsx

@@ -1,114 +1,119 @@
 import React from 'react'
-import { Tree } from 'antd';
+import { Transfer, Button, Icon } from 'antd';
 
-const TreeNode = Tree.TreeNode;
 
-const x = 3;
-const y = 2;
-const z = 1;
-const gData = [];
-
-const generateData = (_level, _preKey, _tns) => {
-  const preKey = _preKey || '0';
-  const tns = _tns || gData;
+class Demo extends React.Component {
+  state = {
+    mockData: [
+      {
+          "key": "0",
+          "title": "content1",
+          "description": "description of content1",
+          "chosen": false,
+      },
+      {
+          "key": "1",
+          "title": "content2",
+          "description": "description of content2",
+          "chosen": true
+      },
+      {
+          "key": "2",
+          "title": "content3",
+          "description": "description of content3",
+          "chosen": true
+      },
+      {
+          "key": "3",
+          "title": "content4",
+          "description": "description of content4",
+          "chosen": false
+      },
+      {
+          "key": "4",
+          "title": "content5",
+          "description": "description of content5",
+          "chosen": false
+      }
+  ],
+    targetKeys: [],
+  }
+  swapItems = (arr, index1, index2) => {
+    let arrClone = JSON.parse(JSON.stringify(arr))    //这里要使用一个深拷贝才能真正地改变state
+    let temp = arrClone[index1]
+    arrClone[index1] = arrClone[index2]
+    arrClone[index2] = temp
+    console.log("changedArrClone", arrClone)
+    this.setState({
+      targetKeys: arrClone
+    }, () => {console.log(`${this.state.targetKeys}`)}
+    );
+  }
+    
 
-  const children = [];
-  for (let i = 0; i < x; i++) {
-    const key = `${preKey}-${i}`;
-    tns.push({ title: key, key });
-    if (i < y) {
-      children.push(key);
+  upSwap = (index) => {
+    let arr = this.state.targetKeys
+    if(index === 0) {
+        return;
     }
+    this.swapItems(arr, index, index - 1)
   }
-  if (_level < 0) {
-    return tns;
-  }
-  const level = _level - 1;
-  children.forEach((key, index) => {
-    tns[index].children = [];
-    return generateData(level, key, tns[index].children);
-  });
-};
-generateData(z);
 
-class Demo extends React.Component {
-  state = {
-    gData,
-    expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
+  downSwap = (index) => {
+    let arr = this.state.targetKeys
+    if(index === arr.length -1) {
+        return;
+    }
+    this.swapItems(arr, index, index + 1);
+  };
+
+  renderRow = (item) => {
+    let index = this.state.targetKeys.indexOf(item.key);
+    if (index === -1) {
+      return <span>{item.title}</span>
+    }
+    else {
+      return (
+      <span> {item.title} <Icon type="arrow-up" onClick={() => {
+        this.upSwap(index)
+      }}/> <Icon type="arrow-down" onClick={() => {
+        this.downSwap(index)
+      }}/></span>
+      );
+    }
   }
 
-  onDragEnter = (info) => {
-    console.log(info);
-    // expandedKeys 需要受控时设置
-    // this.setState({
-    //   expandedKeys: info.expandedKeys,
-    // });
+  handleChange = (targetKeys) => {
+    this.setState({ targetKeys });
   }
 
-  onDrop = (info) => {
-    console.log(info);
-    const dropKey = info.node.props.eventKey;
-    const dragKey = info.dragNode.props.eventKey;
-    const dropPos = info.node.props.pos.split('-');
-    const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
-    // const dragNodesKeys = info.dragNodesKeys;
-    const loop = (data, key, callback) => {
-      data.forEach((item, index, arr) => {
-        if (item.key === key) {
-          return callback(item, index, arr);
-        }
-        if (item.children) {
-          return loop(item.children, key, callback);
-        }
-      });
-    };
-    const data = [...this.state.gData];
-    let dragObj;
-    loop(data, dragKey, (item, index, arr) => {
-      arr.splice(index, 1);
-      dragObj = item;
-    });
-    if (info.dropToGap) {
-      let ar;
-      let i;
-      loop(data, dropKey, (item, index, arr) => {
-        ar = arr;
-        i = index;
-      });
-      if (dropPosition === -1) {
-        ar.splice(i, 0, dragObj);
-      } else {
-        ar.splice(i + 1, 0, dragObj);
-      }
-    } else {
-      loop(data, dropKey, (item) => {
-        item.children = item.children || [];
-        // where to insert 示例添加到尾部，可以是随意位置
-        item.children.push(dragObj);
-      });
-    }
-    this.setState({
-      gData: data,
-    });
+  renderFooter = () => {
+    return (
+      <Button
+        size="small"
+        style={{ float: 'right', margin: 5 }}
+        onClick={this.getMock}
+      >
+        reload
+      </Button>
+    );
   }
 
   render() {
-    const loop = data => data.map((item) => {
-      if (item.children && item.children.length) {
-        return <TreeNode key={item.key} title={item.title}>{loop(item.children)}</TreeNode>;
-      }
-      return <TreeNode draggable="false" key={item.key} title={item.title} />;
-    });
     return (
-      <Tree
-        className="draggable-tree"
-        defaultExpandedKeys={this.state.expandedKeys}
-        draggable
-        onDragEnter={this.onDragEnter}
-        onDrop={this.onDrop}
-      >
-        {loop(this.state.gData)}
-      </Tree>
+      <Transfer
+        dataSource={this.state.mockData}
+        showSearch
+        listStyle={{
+          width: 250,
+          height: 300,
+        }}
+        operations={['to right', 'to left']}
+        targetKeys={this.state.targetKeys}
+        onChange={this.handleChange}
+        render={this.renderRow}
+        footer={this.renderFooter}
+      />
     );
   }
 }