hm-react-cli/template/app/src/components/Switch.js

Create a Huimei React project by module

import { Transfer } from 'antd';
import { useState, useEffect } from 'react';
import { connect } from 'react-redux';

const mapState = (state) => ({
    count: state.count
});

const mapDispatch = ({ count: { increment, incrementAsync } }) => ({
    increment: () => increment(1),
    incrementAsync: () => incrementAsync(1)
});

function SwitchDemo(props) {
    const [mockData, setMockData] = useState([]);
    const [targetKeys, setTargetKeys] = useState([]);

    function getMock() {
        const targetKeys = [];
        const mockData = [];
        for (let i = 0; i < 20; i++) {
            const data = {
                key: i,
                title: `内容${i + 1}`,
                description: `内容${i + 1}的描述`,
                chosen: Math.random() * 2 > 1
            };
            if (data.chosen) {
                targetKeys.push(data.key);
            }
            mockData.push(data);
        }
        setMockData(mockData);
        setTargetKeys(targetKeys);
    }
    useEffect(() => {
        getMock();
    }, []);

    function handleChange(targetKeys, direction, moveKeys) {
        console.log(targetKeys, direction, moveKeys);
        setTargetKeys(targetKeys);
    }

    return (
        <div>
            {props.count}
            <Transfer
                dataSource={mockData}
                targetKeys={targetKeys}
                onChange={handleChange}
                render={(item) => item.title}
            />
        </div>
    );
}

export default connect(mapState, mapDispatch)(SwitchDemo);