单击按钮时在 React 选项卡之间导航

Question

我是 React 新手。我正在使用 React web tabs 在 React 中创建标签。

如何在单击按钮元素时触发选项卡面板的更改，我有两个按钮，“上一个”和“下一个”。单击上一个按钮，我想转到上一个选项卡，然后单击下一个按钮，它应该显示下一个选项卡吗？

 <Tabs defaultTab="one"  vertical className="vertical-tabs" selectedIndex={this.state.selectedTabIndex} 
            onSelect={this.handleSelect}>
            <TabList>
              <Tab tabFor="one"  >BASIC INFORMATION</Tab>
              <Tab tabFor="two"  >ADVANCED INFORMATION</Tab>
              <Tab tabFor="three">ASSIGN USERS</Tab>
              <Tab tabFor="four" >TEMPLATE</Tab>
            </TabList>
            <TabPanel tabId="one">
            //BASIC INFORMATION
            </TabPanel>
            <TabPanel tabId="two">
            //ADVANCED INFORMATION
            </TabPanel>
            <TabPanel tabId="three">
            //ASSIGN USERS
            </TabPanel>
            <TabPanel tabId="four">
            //TEMPLATE
            </TabPanel>
             {
              <div>
    <Button onClick={()=>this.handlePreviousBtnChange()}>Back</Button> 
  </div>}{<div>
 <Button onClick={()=>this.handleNextBtnChange()}>Next</Button> 
</div>}                                 
</Tabs>

请提前帮助me.Thanks

Answer 1

根据项目上这个已关闭的问题，您应该能够使用 defaultTab 以编程方式更改所选选项卡。 https://github.com/marcuslindfeldt/react-web-tabs/issues/10#issuecomment-482846520

这是一个简短的例子。我制作了标签 ID 编号以使 incrementing/decrementing 更容易。

const ControllableTabs = () => {
  const [selectedTab, setSelectedTab] = useState(0);
  const tabCount = 3;

  return (
    <>
      <Tabs defaultTab={selectedTab.toString()}>
        <TabList>
          <Tab tabFor="0">Tab 1</Tab>
          <Tab tabFor="1">Tab 2</Tab>
          <Tab tabFor="2">Tab 3</Tab>
        </TabList>
        <TabPanel tabId="0">
          <p>Tab 1 content</p>
        </TabPanel>
        <TabPanel tabId="1">
          <p>Tab 2 content</p>
        </TabPanel>
        <TabPanel tabId="2">
          <p>Tab 3 content</p>
        </TabPanel>
      </Tabs>
      <Button onClick={() => setSelectedTab((selectedTab + tabCount - 1) % tabCount )}>Back</Button>
      <Button onClick={() => setSelectedTab((selectedTab + 1) % tabCount )}>Next</Button>
    </>
  );
}

我应该注意到，还有其他库可能 ui 满足您的需求，具体取决于您想要的功能。如果您碰巧已经在项目中使用 material-ui，Stepper 组件提供了更多的可定制性。 https://material-ui.com/components/steppers/#stepper

单击按钮时在 React 选项卡之间导航

Navigate between react tabs on button click

reactjs

react-tabs