如何使用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组件实现数据的移动和筛选功能。您也可以根据需要自定义样式和逻辑来满足特定的需求。