Dynamic Update of tabs doesn't open a tab by default

Offen

#337 erstellt am 29.7.2020 3 Kommentare 4 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit: 3/5
Geschätzter Aufwand: 1-2 Tage
Anfängerfreundlichkeit: 45/100

Issue-Typ: Bug
Klarheit: Größtenteils klar
Aktivitätsstatus: Veraltet
Tech-Stack: javascript, react
Bereich: frontend

Rechercherichtung

Beginne damit, das Problem mit dem bereitgestellten Beispiel für Tabs, TabList, Tab und TabPanel zu reproduzieren, bei dem die Tab-Daten in componentDidMount() geladen werden. Verfolge, wie defaultIndex={0} angewendet wird, nachdem die Tabs erneut gerendert wurden. Die Aufgabe ist erfüllt, wenn der erste Tab sichtbar geöffnet ist, sobald das dynamische Array geladen wurde, ohne dass ein Klick erforderlich ist.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

So I have a React Component with a tablist. If I make it Tab 1 and Tab 2 with Tabpanel 1 and 2 everything works fine.
However, if I have an array called 'Types' that gets filled in the componentDidMount(), it re-renders my Tabs, but in my browser, none of the tabs is opened. Meaning, I have to click one in order to open it. adding defaultIndex={0} didn't help.

This is what I render;

    <TabList>
      {types.map(type => <Tab><div className={styles.tab}>{type.value}</div></Tab>)}
    </TabList>

    {types.map(type =>
      <TabPanel>
        { <p>{type.value}</p> }
      </TabPanel>
    )}

  </Tabs>`

Vorherrschende Sprache: JavaScript
Sterne: 3.1k
Forks: 455
Ø Merge: 5 Std. 9 Min.
Gemergte PRs (30 T.): 2

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
Forken Sie das Repository und arbeiten Sie in einem Branch.
Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus reactjs/react-tabs

Tab not updating properly when state changes dynamically Offen

Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 25/100

reactjs/react-tabs#584 · Erstellt am 27.7.2025
className default is lost when props.className is undefined in UncontrolledTabs Offen

Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 45/100

reactjs/react-tabs#581 · 3 Kommentare · Erstellt am 28.5.2025
Can I get the width of the dom of the first selected tab? Offen

Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 35/100

reactjs/react-tabs#571 · Erstellt am 19.12.2024
Support hiding of all TabPanels Offen

Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 35/100

reactjs/react-tabs#525 · 1 Kommentar · 1 Reaktion · Erstellt am 22.7.2023
Disabled tabs should remain keyboard focusable as per W3C WAI ARIA guidelines Offen

Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 35/100

reactjs/react-tabs#521 · 3 Kommentare · Erstellt am 07.6.2023

Alle Issues in reactjs/react-tabs