如何使用AntDesign的Transfer組件

Ant Design的Transfer組件是一個用于在兩個容器之間進行數據傳輸的組件，可以在兩個列表之間進行數據的移動和篩選。以下是使用Ant Design的Transfer組件的基本步驟：

1. 導入Transfer組件和必要的樣式文件：

import { Transfer } from 'antd';
import 'antd/dist/antd.css';

2. 創建Transfer組件并設置相關屬性：

<Transfer
    dataSource={dataSource}   // 數據源，格式為[{ key: '1', title: '標題1' }]
    showSearch
    targetKeys={targetKeys}    // 目標列表的key值數組
    onChange={handleChange}    // 數據移動時的回調函數
    render={item => item.title}   // 自定義渲染列表項的方法
/>

3. 定義數據源和目標列表的key值數組：

const dataSource = [
    { key: '1', title: '標題1' },
    { key: '2', title: '標題2' },
    { key: '3', title: '標題3' },
];

const targetKeys = ['1'];  // 初始目標列表的key值數組

4. 實現handleChange方法來處理數據的移動：

const handleChange = (nextTargetKeys, direction, moveKeys) => {
    console.log('targetKeys:', nextTargetKeys);
    console.log('direction:', direction);
    console.log('moveKeys:', moveKeys);
    // 更新目標列表的key值數組
    setTargetKeys(nextTargetKeys);
};

5. 完整的示例代碼：

import React, { useState } from 'react';
import { Transfer } from 'antd';
import 'antd/dist/antd.css';

const Demo = () => {
    const [targetKeys, setTargetKeys] = useState(['1']);

    const dataSource = [
        { key: '1', title: '標題1' },
        { key: '2', title: '標題2' },
        { key: '3', title: '標題3' },
    ];

    const handleChange = (nextTargetKeys, direction, moveKeys) => {
        console.log('targetKeys:', nextTargetKeys);
        console.log('direction:', direction);
        console.log('moveKeys:', moveKeys);
        setTargetKeys(nextTargetKeys);
    };

    return (
        <Transfer
            dataSource={dataSource}
            showSearch
            targetKeys={targetKeys}
            onChange={handleChange}
            render={item => item.title}
        />
    );
};

export default Demo;

通過以上步驟，您可以成功地使用Ant Design的Transfer組件實現數據的移動和篩選功能。您也可以根據需要自定義樣式和邏輯來滿足特定的需求。