Ant Design Transfer组件如何提取选中项的完整对象数据

Ant Design Transfer的事件回调默认只返回选中项的key数组，无需修改组件内部逻辑，基于传入的全量数据源做key匹配，即可拿到包含所有字段的完整项对象。

现有代码问题 #

• onSelectChange回调实际返回两个参数：左栏选中key数组、右栏选中key数组，原代码只接收了第一个参数，遗漏右栏选中项key
• onChange回调返回的是转移操作完成后右栏所有项的key集合，这才是最终需要提交的选中数据，原代码传递的临时勾选selected不是最终结果
• 缺失key到完整数据对象的映射转换逻辑

修正后代码 #

仅需修改App组件逻辑，自定义TableTransfer部分无需改动：

import React, { useState, useMemo } from "react";
import { Table, Transfer } from "antd";
import difference from "lodash/difference";

// 原有TableTransfer、leftTableColumns、rightTableColumns定义保持不变
// ... 此处省略未改动的代码块 ...

const App = ({ data, func }) => {
  const mockData = useMemo(() => data.map((item) => ({
    key: item.id.toString(),
    id: item.id, // 保留原始id字段，提交后端无需额外转换
    name: item.name,
    price: item.price,
    discount: item.discount,
  })), [data]);

  const originTargetKeys = useMemo(() => mockData.map((item) => item.key), [mockData]);
  // 提前生成key-对象映射表，数据量大时查询效率更高
  const dataMap = useMemo(() => {
    const map = new Map();
    mockData.forEach(item => map.set(item.key, item));
    return map;
  }, [mockData]);

  const [targetKeys, setTargetKeys] = useState(originTargetKeys);
  // 存储左右栏临时勾选（未点击转移按钮）的key
  const [selectedKeys, setSelectedKeys] = useState({
    source: [],
    target: []
  });

  const onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
    setSelectedKeys({
      source: sourceSelectedKeys,
      target: targetSelectedKeys
    });
  };

  const onChange = (newTargetKeys) => {
    setTargetKeys(newTargetKeys);
    // 核心逻辑：根据key从映射表取完整对象
    const selectedFullData = newTargetKeys
      .map(key => dataMap.get(key))
      .filter(Boolean); // 过滤掉不存在的异常项
    // 传递完整选中数据给父组件
    func(selectedFullData);
  };

  return (
    <TableTransfer
      dataSource={mockData}
      targetKeys={targetKeys}
      disabled={false}
      showSearch={true}
      onChange={onChange}
      onSelectChange={onSelectChange}
      filterOption={(inputValue, item) => item.name.includes(inputValue)}
      leftColumns={leftTableColumns}
      rightColumns={rightTableColumns}
    />
  );
};

export default App;

扩展说明 #

如果需要获取临时勾选（未点击转移按钮）的完整对象，用相同逻辑匹配即可：

// 获取左栏临时勾选的完整对象
const sourceSelectedFullData = selectedKeys.source.map(key => dataMap.get(key)).filter(Boolean);
// 获取右栏临时勾选的完整对象
const targetSelectedFullData = selectedKeys.target.map(key => dataMap.get(key)).filter(Boolean);

内容的提问来源于stack exchange，提问作者Nedim