使用材料ui进行反应的动态表

Question

我在将下面的代码转换为 reactJs 时遇到问题，我面临的问题是在这里根据行/单元格的数量使用和更新表标签，但在反应中我不想使用 createElement/appendChild，

我正在使用 useState 来获取计数，但 Table 标签没有按预期工作。不确定让这个标签做出反应或使用材料 ui 的方式是什么。

链接：https ://codesandbox.io/s/muddy-bird-qu9bg?file=/src/DataTable.js

function CreateTable() {

    var rowCtr;

    var cellCtr;

    var rowCnt;

    var cellCnt;

    var myTableDiv = document.getElementById("myDynamicTable");

    var table = document.createElement('Table');

    table.setAttribute("contenteditable", "true");

    table.border = '1';

    table.id = 'myTable';

    var tableBody = document.createElement('Tbody');

    table.appendChild(tableBody);

    rowCnt = document.getElementById('txtrows').value;

    cellCnt = document.getElementById('txtcols').value;

    for (var rowCtr = 0; rowCtr < rowCnt; rowCtr++) {

        var tr = document.createElement('tr');

        tableBody.appendChild(tr);

        for (var cellCtr = 0; cellCtr < cellCnt; cellCtr++) {

            var td = document.createElement('td');

            td.width = '120';

            td.appendChild(document.createTextNode("Click me, Row:" + rowCtr + " Column:" + cellCtr));

            tr.appendChild(td);

        }

    }

    myTableDiv.appendChild(table);

    }

<table contenteditable = "true">

    <tr>

        <td>Row Count</td>

        <td>Column Count</td>

        <td></td>

    </tr>

    <tr>

        <td><input type="text" id="txtrows" /></td>

        <td><input type="text" id="txtcols"/></td>

        <td><button onclick="CreateTable()">Create Table</button></td>

    </tr>

</table>

<div id="myDynamicTable"></div>

Answer 1

你需要使DataTable.js文件像，import React, { Fragment, useState } from "react";import Table from "@material-ui/core/Table";import TableHead from "@material-ui/core/TableHead";import TableBody from "@material-ui/core/TableBody";import TableCell from "@material-ui/core/TableCell";import TableRow from "@material-ui/core/TableRow";import Button from "@material-ui/core/Button";export default function DataTable() {&nbsp; const [rowCount, setRowCount] = useState("");&nbsp; const [colCount, setColCount] = useState("");&nbsp; const [rowCountArray, setRowCountArray] = useState([]);&nbsp; const [colCountArray, setColCountArray] = useState([]);&nbsp; const [showTable, setShowTable] = useState(false);&nbsp; const CreateTable = () => {&nbsp; &nbsp; &nbsp;rowCountArray.length = 0;&nbsp; &nbsp; &nbsp;colCountArray.length = 0;&nbsp; &nbsp; for (let i = 1; i <= rowCount; i++) {&nbsp; &nbsp; &nbsp; rowCountArray.push(i);&nbsp; &nbsp; }&nbsp; &nbsp; setRowCountArray(rowCountArray);&nbsp; &nbsp; for (let i = 1; i <= colCount; i++) {&nbsp; &nbsp; &nbsp; colCountArray.push(i);&nbsp; &nbsp; }&nbsp; &nbsp; setColCountArray(colCountArray);&nbsp; &nbsp; setShowTable(true);&nbsp; };&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; <Table>&nbsp; &nbsp; &nbsp; &nbsp; <TableHead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableRow>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell>Row Count</TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell>Col Count</TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell></TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableRow>&nbsp; &nbsp; &nbsp; &nbsp; </TableHead>&nbsp; &nbsp; &nbsp; &nbsp; <TableBody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableRow>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell component="th" scope="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="txtrows"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={rowCount}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={(e) => setRowCount(e.target.value)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell component="th" scope="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type="text"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; id="txtcols"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={colCount}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={(e) => setColCount(e.target.value)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Button variant="contained" color="primary" onClick={CreateTable}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Create Table&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableRow>&nbsp; &nbsp; &nbsp; &nbsp; </TableBody>&nbsp; &nbsp; &nbsp; </Table>&nbsp; &nbsp; &nbsp; {showTable ? (&nbsp; &nbsp; &nbsp; &nbsp; <Table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableBody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {rowCountArray.map((row, index) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableRow key={index}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {colCountArray.map((col, index) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <TableCell key={index}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Row {row} - Col {col}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableCell>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableRow>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </TableBody>&nbsp; &nbsp; &nbsp; &nbsp; </Table>&nbsp; &nbsp; &nbsp; ) : null}&nbsp; &nbsp; </>&nbsp; );}单击“创建表”按钮，您可以创建一个函数并根据输入的计数生成一个rowCount数组colCount，&nbsp; &nbsp; const CreateTable = () => {&nbsp; &nbsp; &nbsp; rowCountArray.length = 0;&nbsp; &nbsp; &nbsp; colCountArray.length = 0;&nbsp; &nbsp; &nbsp; for (let i = 1; i <= rowCount; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;rowCountArray.push(i);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; setRowCountArray(rowCountArray);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; for (let i = 1; i <= colCount; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;colCountArray.push(i);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; setColCountArray(colCountArray);&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;setShowTable(true);&nbsp; &nbsp;};然后使用以下方法，您可以生成具有相应行和列的表，{rowCountArray.map((row, index) => (&nbsp; &nbsp;<TableRow key={index}>&nbsp; &nbsp; &nbsp; {colCountArray.map((col, index) => (&nbsp; &nbsp; &nbsp; &nbsp; <TableCell key={index}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Row {row} - Col {col}&nbsp; &nbsp; &nbsp; &nbsp; </TableCell>&nbsp; &nbsp; &nbsp; &nbsp;))}&nbsp; &nbsp;</TableRow>&nbsp;))}