Блог

я использую мобильный телефон ant design, у меня возникли некоторые проблемы с условным переключением вкладок.

У меня есть две вкладки , одна из которых-вкладка «Категория», а другая-вкладка «Подкатегория». Я хочу добиться того, чтобы, когда пользователь нажимает на одну из таблиц «Категория», сразу же активная вкладка «Подкатегория» должна быть сброшена до 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 вызовите эту функцию для переключения вкладки (индекс: число) => логическое значение true

Но на самом деле я не понимаю использования этой функции goToTab.

я сделал демо-версию 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 для отслеживания текущего местоположения подтаблицы, а в топтаблицах вставлено
setState -> tabIndex: 0 для сброса индекса подтаблиц

И реализовал свой собственный код. Вот демонстрационная версия : https://codepen.io/dnnzz/pen/yLbLyqb