我是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>
请帮帮我。提前谢谢
根据项目中这个已关闭的问题,您应该能够使用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>
</>
);
}
我应该注意到,根据您想要的功能,还有其他库可能更适合您的需求。如果你碰巧已经在项目中使用了材质ui,Stepper组件提供了更多的可定制性。https://material-ui.com/components/steppers/#stepper