React Redux Material-ui - 使用可编辑单元格创建表格

Bee*_*Nag 1 reactjs redux material-ui

我对材料相当新,我认为我的问题可能有一个简单的答案,但我只想得到一些反馈.我想要做的是渲染一个只包含列标题的表(从数据库中存储的数据填充).此时应该没有行.理想情况下,我希望有一个可点击的按钮,可以添加一行(与列标题具有相同数量的单元格),然后可以将这些数据输入并保存到数据库中.我假设我可以添加onCellClick属性,以便可以将数据输入到material-ui表的单元格中,但我最大的问题是生成行的最佳方法是什么?以前我只是通过将一个对象推入一个空数组来做类似的事情,但我想知道是否有更简洁的方法来做到这一点?特别是考虑到我决定使用React和Redux构建它的主要原因之一是试图避免做这样的事情!

无论如何,谢谢你的时间,如果你能告诉我一个更好的方式的例子,我可能会这样做,非常感谢!

Lar*_*one 6

您可以使用Material-UI的Table标记执行此操作,方法是使用可编辑的组件(下拉列表,文本字段等)填充表格的单元格.但是,我已经停止将它用于更大的数据集,因为它不具备性能.相反,我使用ReactDataGrid.使用Material-UI让CSS看起来很好看有点棘手,但它的性能要高得多.我使用Material-UI的表格在ReactDataGrid中使用Material-UI组件填充单元格.

  • 是的,只需将其添加到行中即可.[这里](https://github.com/lmaccherone/material-ui-template/blob/master/src/app/components/AdvancedTable.jsx)就是这样做的一个例子.它是MUI表的包装器,允许您传入一个数组,一个配置对象和组件来实例化每一行.它比你想要的更复杂,但我没有时间来处理一个更简单的答案. (2认同)