【标签选择】

全部标签和其他标签联动

import React, { useState } from 'react';

const TagSelector = () => {
    const [tagList, setTagList] = useState([
        {
            label: '颜色',
            code: 'color',
            key: 'isColor',
            check: false,
            child: [
                { label: '红色', key: 'isRed', check: false },
                { label: '蓝色', key: 'isBlue', check: false }
            ]
        },
        {
            label: '尺寸',
            code: 'size',
            key: 'isSize',
            check: false,
            child: [
                { label: '大', key: 'isBig', check: false },
                { label: '小', key: 'isSmall', check: false }
            ]
        },
        {
            label: '价格',
            code: 'price',
            key: 'isPrice',
            check: false,
            child: [
                { label: '100', key: 'low', check: false },
                { label: '500', key: 'high', check: false }
            ]
        }
    ]);

    const [selectedKeys, setSelectedKeys] = useState([]);

    const handleToggle = (key, isParent = false) => {
        const newTagList = [...tagList];
        const newSelectedKeys = [...selectedKeys];

        if (isParent) {
            // Toggle parent and all children  
            const tagItem = newTagList.find(item => item.key === key);
            tagItem.check = !tagItem.check;
            tagItem.child.forEach(child => {
                child.check = tagItem.check;
                if (tagItem.check) {
                    newSelectedKeys.push(child.key);
                } else {
                    newSelectedKeys.splice(newSelectedKeys.indexOf(child.key), 1);
                }
            });
        } else {
            // Toggle child and check parent  
            const parentItem = newTagList.find(item => item.child.some(child => child.key === key));
            const childItem = parentItem.child.find(child => child.key === key);
            childItem.check = !childItem.check;

            // Update selectedKeys  
            if (childItem.check) {
                newSelectedKeys.push(childItem.key);
            } else {
                newSelectedKeys.splice(newSelectedKeys.indexOf(childItem.key), 1);
            }

            // Check if all children are checked to update parent and selectedKeys  
            parentItem.check = parentItem.child.every(child => child.check);
        }

        console.log(newSelectedKeys, 'newSelectedKeys')

        setTagList(newTagList);
        setSelectedKeys(newSelectedKeys);
    };

    const getSelectedKeys = () => {
        let params = {};
        selectedKeys.forEach(key => {
            params[key] = true;
        });
        console.log(params,'params')
        return params;
    }

    return (
        <div>
            {tagList.map(item => (
                <div key={item.key}>
                    <label>
                        <input
                            type="checkbox"
                            checked={item.check}
                            onChange={() => handleToggle(item.key, true)}
                        />
                        {item.label} (全部)
                    </label>
                    {item.child.map(child => (
                        <label key={child.key}>
                            <input
                                type="checkbox"
                                checked={child.check}
                                onChange={() => handleToggle(child.key)}
                            />
                            {child.label}
                        </label>
                    ))}
                </div>
            ))}
            <button onClick={() => console.log(getSelectedKeys())}>获取选中值</button>
        </div>
    );
};

export default TagSelector;

``