React手风琴点击AccButton关闭当前激活面板功能实现咨询

你需要调整两处逻辑即可实现需求：

• 首先移除AccButton上的aria-disabled属性配置，原有逻辑会让已激活的按钮处于禁用状态，无法响应点击关闭的操作
• 其次修改点击事件的判断逻辑：当点击的项已经是当前激活项时，直接重置激活状态，否则切换为点击项的激活状态

修改后的完整代码如下：

const { active, setActive } = useContext(AccordionContext)

const eventHandler = (e, index) => {
    e.preventDefault();
    // 新增判断：如果点击的是当前激活项，就重置激活状态，否则设置为当前项
    setActive(active === index ? null : index);
}

return (
    <AccItem id={props.index}>
        <AccButton
            onClick={(e) => eventHandler(e, props.index)}
            aria-expanded={ active === props.index ? 'true' : 'false' }
            {/* 移除了多余的aria-disabled属性 */}
        >
            <AccItemTitle>
                {props.description}
            </AccItemTitle>
        </AccButton>

        <AccPanel elWidth={props.elWidth}>
            <PanelToggle toggle={active === props.index}></PanelToggle>
        </AccPanel>

    </AccItem>
)

注意：如果你AccordionContext中active的初始值是-1而非null，把上面代码中的null替换为-1即可，和初始值保持一致就能正常工作。

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