如何在单击第二个选项卡时更改选项卡索引-解网

问：

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

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

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) {

   //Show something

   //Need this msg outside the tabs

}

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

javascript 反应js 钩子反应标签

    const App = () => {
  const [tabIndex, setTabIndex] = useState(0);

  return (
    <Tabs selectedIndex={tabIndex} onSelect={(index) => setTabIndex(index)}>
      <TabList>
        <Tab>Title 1</Tab>
        <Tab>Title 2</Tab>
      </TabList>
      <TabPanel>1</TabPanel>
      <TabPanel>2</TabPanel>
    </Tabs>
  );
};

<h1>{tabIndex}<h1>

if (tabIndex === 1) {

   //Show something

   //Need this msg outside the tabs

}

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

How to change tab index on clicking second tab

评论

评论