蚂蚁设计goTotab函数有条件答案

【问题标题】：Ant design goTotab function conditionally蚂蚁设计goTotab函数有条件
【发布时间】：2021-06-27 22:11:05
【问题描述】：

我正在使用 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

但我真的不明白这个 goToTab 函数的用法。

【问题讨论】：

标签： javascript reactjs antd

【解决方案1】：

我为将来会遇到此类问题的人做了一个codepen的演示，它非常符合我的要求

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 用于重置子标签索引

并实现了我自己的代码。这是演示：https://codepen.io/dnnzz/pen/yLbLyqb

【讨论】：