如何在Material-UI中插入新行？

Question

我正在开发一个联系人应用程序，其中所有数据都临时存储在客户端。我使用了material-ui表来显示联系人。

单击右下角添加新联系人按钮时，会显示一个包含表单的对话框。单击保存按钮时，数据将保存在状态中。但我面临的问题是如何在表格中插入一个新的行，其中包含表单数据。我搜索了它，但我甚至找不到一个关于相同的查询。添加新联系人按钮位于AddContact组件中，表位于Contacts组件中，但两者都具有Main中的相同父组件。所以简而言之，我无法在表格中显示新的联系人。

Answer 1

在array变量中维护state，当您在对话框中点击提交时，在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到此列表，您的新行就会显示在屏幕上。