antd 穿梭框获取数据

import React, { useState } from ‘react’;
import { Transfer } from ‘antd’;
import type { TransferDirection } from ‘antd/es/transfer’;
import { Avatar } from ‘antd’;
import { UserOutlined } from ‘@ant-design/icons’;

interface RecordType {
key: string;
title: string;
description: string;
}

const mockData: RecordType[] = Array.from({ length: 20 }).map((_, i) => ({
key: i.toString(),
title: content${i + 1},
description: description of content${i + 1},
}));
const arr: any[] = [];
const initialTargetKeys = mockData
.filter((item) => Number(item.key) > 10)
.map((item) => item.key);
function index() {
const [targetKeys, setTargetKeys] = useState(initialTargetKeys);
const [selectedKeys, setSelectedKeys] = useState<string[]>([]);

const onChange = (
nextTargetKeys: string[],
direction: TransferDirection,
moveKeys: string[],
) => {
console.log(‘targetKeys:’, nextTargetKeys);
console.log(‘direction:’, direction);
console.log(‘moveKeys:’, moveKeys);
nextTargetKeys.map((item: any) => {
console.log(item);
// console.log(mockData);
// arr.filter((id) => {});
arr.push(mockData[item]);
});

console.log(new Set(arr));
let a = new Set(arr);
let b = [...a];
console.log(b);
console.log(a);

setTargetKeys(nextTargetKeys);

};

const onSelectChange = (
sourceSelectedKeys: string[],
targetSelectedKeys: string[],
) => {
console.log(‘sourceSelectedKeys:’, sourceSelectedKeys);
console.log(‘targetSelectedKeys:’, targetSelectedKeys);
setSelectedKeys([…sourceSelectedKeys, …targetSelectedKeys]);
};

const onScroll = (
direction: TransferDirection,
e: React.SyntheticEvent,
) => {
console.log(‘direction:’, direction);
console.log(‘target:’, e.target);
};

return (

<Transfer
dataSource={mockData}
titles={[‘Source’, ‘Target’]}
targetKeys={targetKeys}
selectedKeys={selectedKeys}
onChange={onChange}
onSelectChange={onSelectChange}
onScroll={onScroll}
render={(item: any, index: any) => (
<>

{item.title}
{index}

<Avatar shape=“square” size={64} icon={} />
</>
)}
/>

);
}

export default index;