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

Question

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

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

中显示新联系人

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

我看到你在使用 React。这意味着当您将项目列表绑定到渲染函数中的行组件。

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

现在，当您单击该按钮时，您所要做的就是 push 此列表，您的新行将呈现在屏幕上。

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

How to insert a new row in Material-UI?

javascript

reactjs

material-ui