Сброс представления на вкладку по умолчанию с помощью реагирующих веб-вкладок

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

           <Tabs
              defaultTab = "income"
              onChange = {(tabId) => { console.info(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>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
2
0
233
1

Ответы 1

Сделайте значение 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.info(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>
     }

    }

Другие вопросы по теме