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([]);

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]); });

};

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 (

export default index;