Material-UIに新しい行を挿入するにはどうすればいいですか？

Question

すべてのデータがクライアント側に一時的に保存される連絡先アプリケーションを開発しています。私はコンタクトを表示するためにmaterial-uiテーブルを使用しました。

右下に新しい連絡先]ボタンを追加し

が、それはそれでフォームをダイアログを表示しますクリックします。保存ボタンをクリックすると、その状態でデータが保存されます。しかし、私が直面している問題は、テーブル内にフォームデータを含む新しい行を挿入する方法です。私はそれを探しましたが、同じことについても1つの質問を見つけることはできませんでした。新しい連絡先の追加ボタンは AddContactコンポーネントにあり、テーブルは Contactsコンポーネントにありますが、どちらも同じ親コンポーネントを持っています（ Main）。一言で言えば、私は新しい連絡先をテーブルに表示することができません。

Answer 1

stateの変数にarrayを維持します。ダイアログでサブミットをクリックすると、そのデータがstate arrayにプッシュされます。このように、動的に行を生成するarrayを使用します。

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

行を生成するには、このような_generateRows機能を書く：

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

参考：Material-UI tableを。

注：el.a、el.b、el.cを元のデータに置き換えてください。

Answer 2

私はあなたが反応を参照してください参照してください。これは、レンダリング機能の 行コンポーネントにアイテムのリストをバインドした場合に発生します。

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

今、あなたはあなたがしなければならないすべては、このリストにpushであり、あなたの新しい行が画面に描画されるボタンをクリックしたとき。