1

我是 React 的新手。我正在使用React Web 选项卡在 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>

请帮助我。在此先感谢

4

1 回答 1

3

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

这是一个简短的例子。我制作了选项卡 ID 编号以使递增/递减更容易。

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>
    </>
  );
}

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

于 2020-07-30T18:00:45.953 回答