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

时间:2016-03-15 15:22:06

标签: reactjs redux material-ui

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

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

1 个答案:

答案 0 :(得分:6)

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