React 下拉多选，全选/全不选功能组件

组件名：checkbox-select

组件截图：

 

文件内容：

src/pages/checkbox-select/index.js

import CheckboxSelect from 'components/checkbox-select';

function Page() {
    // 演示数据
    const testList = [
        { label: '#演示项目 1', value: 1 },
        { label: '#演示项目 2', value: 2 },
        { label: '#演示项目 3', value: 3 },
        { label: '#演示项目 4', value: 4 },
        { label: '#演示项目 5', value: 5 },
        { label: '#演示项目 6', value: 6 },
        { label: '#演示项目 7', value: 7 },
        { label: '#演示项目 8', value: 8 },
    ];

    // 选择返回数据
    const changeCallback = (data) => {
        console.log('callback data---->', data);
    };

    return (
        <>
            <CheckboxSelect optionsList={testList} changeCallback={changeCallback} />
        </>
    );
}

export default Page;

View Code