import React, { useEffect, useState } from 'react'; import { Button, Transfer } from 'antd'; import type { TransferProps } from 'antd'; interface RecordType { key: string; title: string; description: string; chosen: boolean; } const App: React.FC = () => { const [mockData, setMockData] = useState<RecordType[]>([]); const [targetKeys, setTargetKeys] = useState<TransferProps['targetKeys']>([]); const getMock = () => { const tempTargetKeys = []; const tempMockData = []; for (let i = 0; i < 20; i++) { const data = { key: i.toString(), title: `content${i + 1}`, description: `description of content${i + 1}`, chosen: i % 2 === 0, }; if (data.chosen) { tempTargetKeys.push(data.key); } tempMockData.push(data); } setMockData(tempMockData); setTargetKeys(tempTargetKeys); }; useEffect(() => { getMock(); }, []); const handleChange: TransferProps['onChange'] = (newTargetKeys) => { setTargetKeys(newTargetKeys); }; const renderFooter: TransferProps['footer'] = (_, info) => { if (info?.direction === 'left') { return ( <Button size="small" style={{ display: 'flex', margin: 8, marginInlineEnd: 'auto' }} onClick={getMock} > Left button reload </Button> ); } return ( <Button size="small" style={{ display: 'flex', margin: 8, marginInlineStart: 'auto' }} onClick={getMock} > Right button reload </Button> ); }; return ( <Transfer dataSource={mockData} showSearch listStyle={{ width: 250, height: 300, }} operations={['to right', 'to left']} targetKeys={targetKeys} onChange={handleChange} render={(item) => `${item.title}-${item.description}`} footer={renderFooter} /> ); }; export default App;