React独立可复用Dropdown组件异常：点击单个下拉框全部展开

首先看你提供的代码，理论上每个Dropdown组件内部都维护了独立的open状态，点击其中一个应该只会展开当前下拉框，不会影响另一个。如果实际运行时出现两个同时展开的情况，大概率是以下问题之一：

• 全局状态污染：不小心把open状态提升到了父组件或全局上下文，导致两个Dropdown共享同一个状态变量
• CSS样式冲突：.dropdown样式中使用了全局触发规则（比如兄弟选择器），点击一个时影响了另一个的显示
• 事件冒泡问题：按钮点击事件未正确阻止冒泡，触发了父元素的事件，意外触发另一个Dropdown的展开逻辑

如果你的需求是点击一个下拉框展开时自动收起其他下拉框，需要将展开状态的控制权提到父组件，通过唯一标识区分不同的Dropdown，修改后的代码如下：

修改后的Dropdown组件 #

interface DropdownProps {
    options: string[];
    onSelect: (option: string) => void;
    isOpen: boolean;
    onToggle: () => void;
}

const Dropdown: React.FC<DropdownProps> = ({ options, onSelect, isOpen, onToggle }) => {
    const [selected, setSelected] = useState<string | null>(null);
    
    const handleClick = (option: string) => {
        setSelected(option);
        onSelect(option);
        onToggle(); // 选择选项后自动收起
    };

    return (
        <div className="dropdown m-1.5 bg-neutral-700 text-neutral-100 w-fit rounded-[0.5rem]">
            <button onClick={onToggle} className="py-2 px-3">
                {selected || "select option"}
            </button>
            {isOpen && options.map((option, index) => (
                <li 
                    className="py-2 px-3 list-none rounded-[0.5rem] hover:bg-neutral-900" 
                    key={index} 
                    onClick={() => handleClick(option)}
                >
                    {option}
                </li>
            ))}
        </div>
    );
};

修改后的App组件 #

const App = () => {
    const [selectedOption1, setSelectedOption1] = useState<string | null>(null);
    const [selectedOption2, setSelectedOption2] = useState<string | null>(null);
    const [openDropdownId, setOpenDropdownId] = useState<string | null>(null);

    const handleToggleDropdown = (id: string) => {
        // 点击同一个下拉框切换状态，点击不同的则展开新的并收起旧的
        setOpenDropdownId(prev => prev === id ? null : id);
    };

    return (
        <div className="flex">
            <Dropdown 
                options={["Option A", "Option B", "Option C"]} 
                onSelect={setSelectedOption1}
                isOpen={openDropdownId === "dropdown1"}
                onToggle={() => handleToggleDropdown("dropdown1")}
            />
            <Dropdown 
                options={["Option X", "Option Y", "Option Z"]} 
                onSelect={setSelectedOption2}
                isOpen={openDropdownId === "dropdown2"}
                onToggle={() => handleToggleDropdown("dropdown2")}
            />
        </div>
    );
};

核心逻辑说明 #

• 父组件App通过openDropdownId状态记录当前展开的下拉框唯一标识
• 每个Dropdown接收isOpen（是否展开）和onToggle（切换展开状态）属性，完全由父组件控制展开逻辑
• 点击下拉框按钮时，父组件更新openDropdownId，实现“展开当前、收起其他”的联动效果

如果只是需要每个Dropdown独立控制展开/收起（互不影响），检查原代码是否存在上述提到的状态污染或样式问题即可，原代码的逻辑本身是正确的。

内容的提问来源于stack exchange，提问作者Ayush Mishra