Ant Design 4.14.0中穿梭框Transfer的使用

import React, { Component } from 'react'
import { Transfer } from 'antd'

const mockData = [];

for (let i = 0; i < 20; i++) {
    mockData.push({
        key: i.toString(),
        title: `content${i + 1}`,
        description: `description of content${i + 1}`
    });
}

const oriTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);

export default class test extends Component {
    state = {
        appDependent_targetKeys: oriTargetKeys, // 穿梭框
        appDependent_selectedKeys: [], // 穿梭框
    }

    // 穿梭框
    appDependent_onChange = (nextTargetKeys, direction, moveKeys) => {
        this.setState({ appDependent_targetKeys: nextTargetKeys });

        console.log('targetKeys: ', nextTargetKeys);
        console.log('direction: ', direction);
        console.log('moveKeys: ', moveKeys);
    };

    appDependent_onSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
        this.setState({ appDependent_selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys] });

        console.log('sourceSelectedKeys: ', sourceSelectedKeys);
        console.log('targetSelectedKeys: ', targetSelectedKeys);
    };

    appDependent_onScroll = (direction, e) => {
        console.log('direction:', direction);
        console.log('target:', e.target);
    };
    render() {
        const {targetKeys, selectedKeys} = this.state;

        return (
            <>
                <Transfer
                    dataSource={mockData}
                    titles={['所有服务', '已选服务']}
                    targetKeys={targetKeys}
                    selectedKeys={selectedKeys}
                    onChange={this.appDependent_onChange}
                    onSelectChange={this.appDependent_onSelectChange}
                    onScroll={this.appDependent_onScroll}
                    render={item => item.title}
                    listStyle={{
                        width: 300,
                        height: 300,
                    }}
                />
            </>
        )
    }
}