如何知道我们在哪个 react 选项卡上

How to know which react tab we are on

提问人：Naidu 提问时间：4/14/2023 最后编辑：Naidu 更新时间：4/15/2023 访问量：129

问：

我的代码中有两个选项卡，单击第二个选项卡时，我需要显示一条消息，但我不知道如何知道何时选择第二个选项卡。

问题是selectedIndex根本没有改变，我想显示的消息也没有出现。

const [selectedIndex, setSelectedIndex] = useState(1);

<Tabs selectedIndex={selectedIndex} onSelect={(index) => setSelectedIndex(index)} />
<TabList>
<Tab>One</Tab>
<Tab>Second</Tab>
</TabList>
<TabsPanel>content</TabsPanel>
<TabsPanel>content</TabsPanel>
</Tabs>

if (selectedIndex == 2) {
   //Show something
   //Need this msg outside the tabs
}

我已经尝试过这个，根据 react-tabs 文档，这应该有效，但实际上在我的情况下不起作用。请建议 onSelect 的任何替代方案，或者至少在第二个选项卡中显示如何更改 selectedIndex。

javascript reactjs typescript react-hooks react-tabs

评论

6赞 Ronak 4/14/2023
选项卡索引将从 So Your initial state should be 和 for condition 开始00selectedIndex===1

答：

1赞 0stone0 4/14/2023 #1

似乎您正在尝试使用受控模式，该模式是通过传递道具来激活的。selectedIndex

您的问题是由于将默认状态设置为第一个选项卡具有索引 的 where 引起的。因此，将 更改为：10useState

const [selectedIndex, setSelectedIndex] = useState(0);

然后，您可以将当前选项卡显示为：

{'Current tab index: ' + (selectedIndex + 1)}

使用不受控制模式时，不需要 .onSelect

使用以下结构时，库将呈现所需的选项卡：

const Component = (
    <Tabs>
        <TabList>
            <Tab>One</Tab>
            <Tab>Second</Tab>
        </TabList>

        <TabPanel>
            <p>
                CONTENT - TAB - ONE
            </p>
        </TabPanel>
        <TabPanel>
            <p>
                CONTENT - TAB - SECOND
            </p>
        </TabPanel>
    </Tabs>
);

评论

0赞 Naidu 4/14/2023
嗨，使用 TabsPanel，它将呈现所需的内容，但在这里我需要在选项卡外显示该消息。这就是我尝试选择等的原因
0赞 0stone0 4/14/2023
我改进了我的答案@Naidu。
0赞 Naidu 4/15/2023
嗨，感谢您的回答。但是在选择第二个选项卡时，我找不到更改selectedIndex的位置。我在onSelect中尝试过，但它不起作用。基本上，我需要在选择第二个选项卡时设置selectedIndex的状态，但是如果不需要在“选择”上使用，我将在哪里执行此操作
0赞 0stone0 4/15/2023
我不确定你问什么。也许将您的新代码添加到您的问题中以显示哪些内容不起作用？
0赞 Naidu 4/15/2023
const [selectedIndex， setSelectedIndex] = useState（0）;<Tabs selectedIndex={selectedIndex} onSelect={（index） => setSelectedIndex（index）} /> <TabList> <Tab>One</Tab> <Tab>Second</Tab> </TabList> <TabsPanel>content</TabsPanel> <TabsPanel>content</TabsPanel> </Tabs> if （selectedIndex == 1） { //显示内容 //在选项卡外需要此消息 }

上一个：如何在单击第二个选项卡时更改选项卡索引

下一个：未找到模块：错误：无法解析“react-tabs/style/react-tabs.css”