Prime React Accordion无法阻止事件冒泡，需仅点击切换图标触发折叠/展开

问题核心：onTabOpen/onTabClose是组件完成折叠/展开后的回调，此时阻止事件已经无法逆转组件状态变化，必须改用受控模式手动控制activeIndex，结合头部点击事件判断点击源。

实现步骤： #

• 维护组件内部的activeIndex状态，替代组件的自动管理
• 给每个AccordionTab的头部添加点击事件监听
• 判断点击目标是否为切换图标（或其容器），仅在符合条件时更新activeIndex

完整代码示例： #

import { useState } from 'react';
import { Accordion, AccordionTab } from 'primereact/accordion';

const CustomAccordion = () => {
    // 受控模式维护展开状态
    const [activeIndex, setActiveIndex] = useState<number[]>([0]);

    const handleHeaderClick = (event: React.MouseEvent, tabIndex: number) => {
        // 检查点击目标是否是切换图标或其父容器
        const target = event.target as Element;
        const isIconClicked = target.classList.contains('p-accordion-toggle-icon') 
            || target.closest('.p-accordion-toggle-icon');

        if (!isIconClicked) {
            console.log("不触发折叠/展开");
            return;
        }

        // 处理多展开模式下的状态切换
        const newActiveIndex = [...activeIndex];
        const index = newActiveIndex.indexOf(tabIndex);
        
        if (index > -1) {
            newActiveIndex.splice(index, 1);
        } else {
            newActiveIndex.push(tabIndex);
        }

        setActiveIndex(newActiveIndex);
    };

    return (
        <Accordion multiple activeIndex={activeIndex}>
            <AccordionTab 
                header="Tab 1"
                onClick={(e) => handleHeaderClick(e, 0)}
            >
                <p>Tab 1 content</p>
            </AccordionTab>
            <AccordionTab 
                header="Tab 2"
                onClick={(e) => handleHeaderClick(e, 1)}
            >
                <p>Tab 2 content</p>
            </AccordionTab>
        </Accordion>
    );
};

export default CustomAccordion;

关键说明： #

• 移除了onTabOpen/onTabClose回调，改用受控状态完全控制展开/折叠逻辑
• 通过closest('.p-accordion-toggle-icon')兼容点击图标内部元素的情况（比如图标是SVG时，target可能是SVG元素）
• 多展开模式下的状态切换逻辑和组件默认行为保持一致

内容的提问来源于stack exchange，提问作者Patryk Łęczycki