Блог

Моя вкладка по умолчанию — «Доход». У меня есть выпадающий компонент поверх вкладки. Если значение в выпадающем списке изменится, мне нужно сбросить представление на вкладку по умолчанию (доход). Пожалуйста, помогите мне в этом.

            <Tabs
              defaultTab="income"
              onChange={(tabId) => { console.log(tabId) }}>
              <TabList>
                <Tab tabFor="income">Income</Tab>
                <Tab tabFor="expense">Expense</Tab>
                <Tab tabFor="liability">Liabilities</Tab>
              </TabList>
              <TabPanel tabId="income">
               <p>Income</p>
              </TabPanel>
              <TabPanel tabId="expense">
                <p>Expense</p>
              </TabPanel>
              <TabPanel tabId="liability">
                <p>Liability</p>
              </TabPanel>
            </Tabs>
  

Задайте значение defaultTab по умолчанию в качестве состояния, чтобы оно также было динамическим, и при необходимости обновляйте соответствующим образом (в вашем случае значение onChange вашего выпадающего компонента.

например

  class TabSample extends React.Component {

    state = {
      defaultTab: 'Income'
    }

    onDropdownChange = () => {
     // reset default tab value to initial state
     this.setState({defaultTab: 'Income'})
    }

    render(){
     const { defaultTab } = this.state;
     return <Tabs
              defaultTab={defaultTab}
              onChange={(tabId) => { console.log(tabId) }}>
              <TabList>
                <Tab tabFor="income">Income</Tab>
                <Tab tabFor="expense">Expense</Tab>
                <Tab tabFor="liability">Liabilities</Tab>
              </TabList>
              <TabPanel tabId="income">
               <p>Income</p>
              </TabPanel>
              <TabPanel tabId="expense">
                <p>Expense</p>
              </TabPanel>
              <TabPanel tabId="liability">
                <p>Liability</p>
              </TabPanel>
            </Tabs>
     }

    }