如何解决Ant 有条件地设计 goTotab 函数
我正在使用 ant design mobile,我有条件地切换选项卡。
我有两个选项卡,一个是 topCategorytab 另一个是 subCategory 选项卡我想实现,当用户单击 topCategoryTab 之一时,应立即将 subCategory 选项卡的 activetab 重置为 0 。
这是我试过的:
<Tabs
tabBarPosition="bottom"
onTabClick={(tab,index) => {
this.getRestaurantItems(
tab.product_category_id,this.state.currentSubCatId
);
this.findSubCategories(tab.product_category_id);
this.setState({
currentTopCatId: tab.product_category_id,subCatTabInitialTab: 0,});
}}
tabs={this.state.tabs}
initialPage={0}
renderTabBar={(props) => <Tabs.DefaultTabBar {...props} page={4} />}
/>
<WhiteSpace />
<Tabs
onTabClick={(tab,index) => {
this.setState({
currentSubCatId: tab.subCatId,});
this.getRestaurantItems(this.state.currentTopCatId,tab.subCatId);
console.log(
"state sub category id veee top cat id",this.state.currentTopCatId,tab.subCatId
);
}}
tabs={this.state.subCategories}
initialPage={0}
goToTab={this.state.subCatTabInitialTab}
renderTabBar={(props) => <Tabs.DefaultTabBar {...props} page={3} />}
>
{this.renderContent}
</Tabs>
在文档中他们说的是:goToTab 调用这个函数来切换 Tab (index: number) => boolean true
解决方法
我为以后会遇到此类问题的人做了一个codepen的demo,非常符合我的要求
state = {
tabIndex:0,}
renderContent = tab =>
(<div style={{ display: 'flex',alignItems: 'center',justifyContent: 'center',height: '150px',backgroundColor: '#fff' }}>
<p>Content of {tab.title}</p>
</div>);
//goToTab call this function to switch Tab (index: number) => boolean
render() {
const tabs = [
{ title: '1st Tab' },{ title: '2nd Tab' },{ title: '3rd Tab' },{ title: '4th Tab' },{ title: '5th Tab' },{ title: '6th Tab' },{ title: '7th Tab' },{ title: '8th Tab' },{ title: '9th Tab' },];
return (
<div>
<WhiteSpace />
<Tabs onTabClick={(tab,index)=>{
this.setState({
tabIndex:0
})
}} tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />}>
{this.renderContent}
</Tabs>
<Tabs onTabClick={(tab,index) =>{
this.setState({
tabIndex : index
})
}
}
page={this.state.tabIndex || 0} tabs={tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={3} />}>
{this.renderContent}
</Tabs>
<WhiteSpace />
</div>
使用 tabIndex 状态来跟踪子选项卡的当前位置和插入的 topTabs setState -> tabIndex: 0 用于重置 subTabs 索引
并实现了我自己的代码。 这是演示:https://codepen.io/dnnzz/pen/yLbLyqb
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。