Wie füge ich eine neue Zeile in Material-UI ein?

Question

Ich entwickle eine Kontaktanwendung, bei der alle Daten vorübergehend auf der Clientseite gespeichert werden. Ich habe die Tabelle material-ui verwendet, um die Kontakte anzuzeigen.

Wenn rechts unten neuen Kontakt-Button hinzufügen geklickt wird es einen Dialog mit einem Formular darin zeigt. Wenn auf die Schaltfläche Speichern geklickt wird, werden die Daten im Status gespeichert. Aber das Problem, mit dem ich konfrontiert bin, ist, wie man eine neue Zeile in die Tabelle mit den Formulardaten einfügt. Ich suchte danach, aber ich konnte nicht einmal eine einzige Frage in Bezug auf dasselbe finden. Die Schaltfläche zum Hinzufügen neuer Kontakte befindet sich in AddContact Komponente und Tabelle ist in Contacts Komponente, aber beide haben die gleiche Mutterkomponente, die in Main ist. Kurz gesagt, ich kann den neuen Kontakt in der Tabelle nicht anzeigen.

Answer 1

Pflegen Sie eine array in state Variable, wenn Sie auf Senden in Dialog klicken, drücken Sie diese Daten in state array. Verwenden Sie die array die Zeilen dynamisch zu erzeugen, wie folgt aus:

<Table> 
    <TableHeader> 
     <TableRow> 
      /*Define the headers*/ 
     </TableRow> 
    </TableHeader> 
    <TableBody> 
     {this._generateRows()} 
    </TableBody> 
</Table> 

Schreiben Sie die _generateRows Funktion wie diese Zeilen zu generieren:

_generateRows(){ 
    return this.state.data.map(el => { 
    return <TableRow> 
       <TableRowColumn>{el.a}</TableRowColumn> 
       <TableRowColumn>{el.b}</TableRowColumn> 
       <TableRowColumn>{el.c}</TableRowColumn> 
      </TableRow> 
    }) 
} 

Referenz: Material-UI table.

Hinweis: ersetzen el.a, el.b, el.c mit den Originaldaten.

Answer 2

Ich sehe, Sie verwenden reagieren. Das bedeutet, wenn Sie eine Liste von Elementen an die Zeilenkomponenten in Ihrer Renderfunktion binden.

{list.map(item => <RowComponent key={item.id}/>)} 

Nun, wenn Sie auf die Schaltfläche klicken alles, was Sie tun müssen, ist push zu dieser Liste und Ihre neue Zeile auf dem Bildschirm wiedergegeben.