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

问题描述

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

I'm developing a contacts application where all data is stored on client-side temporarily. I've used material-ui table to display the contacts.

单击右下角的添加新联系人"按钮时，将显示一个带有表单的对话框.单击保存"按钮后，数据将保存为该状态.但我面临的问题是如何在表格中插入一个包含表单数据的新行.我进行了搜索，但找不到相同的查询.添加新联系人"按钮位于 AddContact 组件中，而表位于 Contacts 组件中，但是两者的父组件均位于 Main 中.简而言之，我无法在表格中显示新联系人.

When add new contact button on the bottom right is clicked it displays a Dialog with a form in it. When save button is clicked the data is saved in the state. But the problem I'm facing is how to insert a new row within the table with the form data in it. I searched for it but I couldn't find even a single query regarding the same. The add new contact button is in AddContact component and table is in Contacts component but both have same parent component which is in Main. So in a nutshell I'm not able to display the new contact in the table.

推荐答案

在 state 变量中保持一个 array ，当您在Dialog中单击Submit时，将该数据推送到状态数组.使用 array 来动态生成行，如下所示:

Maintain an array in state variable, when you click on submit in Dialog, push that data in state array. Use the array to generate the rows dynamically, like this:

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

像这样编写 _generateRows 函数以生成行:

Write the _generateRows function like this to generate the rows:

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

参考文献:材料UI表.

注意:用原始数据替换 el.a，el.b，el.c .

这篇关于如何在Material-UI中插入新行?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！