如何使用AntDesign的Transfer組件

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

1. 導(dǎo)入Transfer組件和必要的樣式文件：

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

2. 創(chuàng)建Transfer組件并設(shè)置相關(guān)屬性：

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

3. 定義數(shù)據(jù)源和目標(biāo)列表的key值數(shù)組：

const dataSource = [
    { key: '1', title: '標(biāo)題1' },
    { key: '2', title: '標(biāo)題2' },
    { key: '3', title: '標(biāo)題3' },
];

const targetKeys = ['1'];  // 初始目標(biāo)列表的key值數(shù)組

4. 實現(xiàn)handleChange方法來處理數(shù)據(jù)的移動：

const handleChange = (nextTargetKeys, direction, moveKeys) => {
    console.log('targetKeys:', nextTargetKeys);
    console.log('direction:', direction);
    console.log('moveKeys:', moveKeys);
    // 更新目標(biāo)列表的key值數(shù)組
    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: '標(biāo)題1' },
        { key: '2', title: '標(biāo)題2' },
        { key: '3', title: '標(biāo)題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組件實現(xiàn)數(shù)據(jù)的移動和篩選功能。您也可以根據(jù)需要自定義樣式和邏輯來滿足特定的需求。