ReactJS + Material-UI: Wie werden FlatButton und Dialog von Material-UI in jedem TableRow verwendet?
Ich habe die <Table> einer Material-UI und in jeder <TableRow> (die dynamisch gerendert wird) für <TableBody> würde ich gerne eine Schaltfläche ( <FlatButton> ) für eine der Spalten haben. Und sobald der Button angeklickt ist, öffnet sich ein <Dialog> und im Inneren wäre ein funktionierender <Tabs> .
Wie kann ich also <FlatButton> für jede Zeile einer bestimmten Spalte anzeigen, und wenn die Schaltfläche angeklickt wird, zeige <Dialog> zusammen mit einer funktionierenden <Tabs> auf der Innenseite als Inhalt an? Und schließen Sie <Dialog> , wenn Sie auf die Außenseite geklickt haben?
Bisher habe ich Folgendes, aber ich habe die folgenden Probleme festgestellt: Das öffnet sich, aber es ist langsam und das Klicken außerhalb von <Dialog> schließt es nicht, <Tabs> ist sichtbar, aber es funktioniert nicht:
Haupttabelle:
%Vor%Gerenderte Tabellenzeile:
%Vor%Vielen Dank im Voraus und wir werden die Antwort annehmen / upvote.
3 Antworten
Sie sollten wahrscheinlich nur einen Dialog für die gesamte Tabelle haben, der in Ihrer MainTable -Komponente lebt. Dies ist effizienter, da Sie für jede Zeile keinen Dialog, sondern nur einen Dialog benötigen.
Damit die Schaltfläche in RenderedTableRow das Modal öffnet und angibt, welche Zeile ausgewählt ist, müssen Sie eine Callback-Funktion von MainTable nach RenderedTableRow übergeben, die beim Aufruf den zu öffnenden Dialog einstellt und speichert, welche Zeile ausgewählt wurde:
Hier ist ein Arbeitsbeispiel unten, es sollte direkt über Copy Pasta funktionieren.
Die Antwort auf Ihre Frage ist, dass Sie in der Lage sein müssen, zwischen den verschiedenen rows zu unterscheiden, wenn Sie sie auf true setzen, werden alle Dialoge angezeigt, oder möglicherweise nur die letzte. Sobald Sie es differenzieren, sollte die Anzeige von dialog kein Problem darstellen. Es gibt Möglichkeiten, nur ein dialog zu haben und dies funktioniert immer noch, aber ich werde es dir sagen lassen.
Etwas zu bemerken, ist, dass Sie diesen Code definitiv säubern können. Erstellen Sie separate Dateien zum Erstellen von TableRows TableColumns etc.
Ich habe es vorerst auf zwei Spalten belassen, aber Sie sollten den Code verstehen können. Fühlen Sie sich frei, irgendwelche zusätzlichen Fragen zu stellen.
%Vor% Wie bereits erwähnt, sollten Sie nur ein Dialog Element zusammen mit der Tabellenkomponente haben. Das Einbetten von Dialog in jeder Zeile wirkt sich auf die Leistung aus und ist generell eine schlechte Übung. Hier ist die Lösung für mockige Tabs:
So funktioniert es jetzt:
Wenige Bemerkungen:
- Sie sollten diesen Code in kleinere Komponenten aufteilen, ich habe dies alles in einem geschrieben, um es einfach zu testen,
- Denken Sie daran,
keyprop in allen Elementen der Liste zu verwenden (wo Sie über eine Liste iterieren) - sowohl Zeilen als auch Tabs (keyfehlt in Ihrer Frage).
Tags und Links javascript html reactjs react-jsx material-ui