时间戳

首页 > 解决方案 > 如何在第二次点击时关闭手风琴？

javascript - 如何在第二次点击时关闭手风琴？

问题描述

我有手风琴组件，它在点击时显示。我在第二次单击时关闭它时遇到问题。目前我点击一次，它会展开，但第二次点击后没有任何变化。谢谢你的帮助

    const [activeTab, setActiveTab] = React.useState(props.tabIndex);

    const tabs = props.tabs.map((tab) => {
        return (
            <>
                <TabContainer>
                    <Tab
                        key={tab.index}
                        onClick={() => setActiveTab(tab.index)}. //here it opens
                        className={typeof tab.content === 'string' ? '' : 'unactive-tab'}
                    >
                        {tab.name}
                    </Tab>
                </TabContainer>
                {tab.index === activeTab ?
                    <div
                        id="content"
                        style={{ width: '100%', margin: '2rem 0' }}
                        dangerouslySetInnerHTML={{ __html: tab.content as string }}
                    />
                    : null}
            </>
        );
    });

标签： javascriptreactjstypescript

解决方案

也许尝试将您的 onClick 方法更改为此

  onClick= {() => {
   activTab == tab.index ? setActiveTab(-1) : setActiveTab(tab.index)
  })

在活动选项卡与单击的选项卡的当前索引匹配的情况下，我们将其设置为 -1，因此不匹配选项卡（不显示选项卡）；否则我们将活动选项卡设置为单击的当前选项卡。

推荐阅读