Ant 有條件地設計 goTotab 函數

Question

我正在使用 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 函數的用法。

Answer 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 用於重置 subTabs 索引

並實現了我自己的代碼。 這是演示： https : //codepen.io/dnnzz/pen/yLbLyqb