reactjs - 使用 material-ui 创建可扩展网格

Question

我需要制作可扩展的网格，即当用户单击行时，它应该展开并在下面显示另一个网格。

我需要使用自定义网格创建下面是我的渲染表代码

<TableBody>
  {tableData.length > 0 &&
    tableData.map((row, rowIndex) => {
      return (
        <React.Fragment key={`row-${rowIndex}`}>
          <TableRow>
              <TableCell key='column-checkbox'>
                Checkbox
              </TableCell>
            )}
            {row.columns.map((column, columnIndex) => {
              return (
                <TableCell
                  key={`column-${columnIndex}`}
                >
                  {column}
                </TableCell>
              )
            })}
          </TableRow>
        </React.Fragment>
      )
    })}
</TableBody>

标签： reactjsmaterial-ui

Answer 1

您可以在 TableRow 上添加 onCLick 事件

handleRowCLick = () => {
//write code to render child table here
}
 <TableRow onClick={this.handleRowCLick}>
</TableRow>