javascript - 单击另一个时保持手风琴项打开

Question

所以我有这个手风琴组件，它目前在点击时打开和关闭。但是当我点击例如第一个项目并打开它时，当我点击第二个项目时第一个关闭，而我想保持它打开。不知道我应该如何处理这个问题。

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

const tabs = props.tabs.map((tab) => {
    return (
        <>
            <TabContainer>
                <Tab
                    key={tab.index}
                    onClick= {() => {activTab == tab.index ? setActiveTab(-1) : setActiveTab(tab.index)})
                    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

Answer 1

更改 props.tabIndex为选项卡索引数组，而不仅仅是 1 个索引。

假设您现在通过 props 发送一组索引。例如 // props.tabIndexes = [1,5,2]

const [activeTabs, setActiveTabs] = React.useState(props.tabIndexes);
const tabs = props.tabs.map((tab) => {
return (
    <>
        <TabContainer>
            <Tab
                key={tab.index}
                onClick= {() => {activeTabs.includes(tab.index) ? setActiveTabs(activeTabs.filter(tabIndex => tabIndex !== tab.index ) ) : setActiveTabs(activeTabs.push(tab.index)})
                className={typeof tab.content === 'string' ? '' : 'unactive-tab'}
            >
                {tab.name}
            </Tab>
        </TabContainer>
        {activeTabs.includes(tab.index) ?
            <div
                id="content"
                style={{ width: '100%', margin: '2rem 0' }}
                dangerouslySetInnerHTML={{ __html: tab.content as string }}
            />
            : null}
    </>
);
});