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

Question

我在将下面的代码转换为 reactJs 时遇到问题，我面临的问题是在这里根据行/单元格的数量使用和更新表标签，但在反应中我不想使用 createElement/appendChild，我正在使用 useState 来获取计数，但 Table 标签没有按预期工作。不确定让这个标签做出反应或使用材料 ui 的方式是什么。链接：https ://codesandbox.io/s/muddy-bird-qu9bg?file=/src/DataTable.jsfunction 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() {

  const [rowCount, setRowCount] = useState("");

  const [colCount, setColCount] = useState("");

  const [rowCountArray, setRowCountArray] = useState([]);

  const [colCountArray, setColCountArray] = useState([]);

  const [showTable, setShowTable] = useState(false);

  const CreateTable = () => {

     rowCountArray.length = 0;

     colCountArray.length = 0;

    for (let i = 1; i <= rowCount; i++) {

      rowCountArray.push(i);

    }

    setRowCountArray(rowCountArray);

    for (let i = 1; i <= colCount; i++) {

      colCountArray.push(i);

    }

    setColCountArray(colCountArray);

    setShowTable(true);

  };

  return (

    <>

      <Table>

        <TableHead>

          <TableRow>

            <TableCell>Row Count</TableCell>

            <TableCell>Col Count</TableCell>

            <TableCell></TableCell>

          </TableRow>

        </TableHead>

        <TableBody>

          <TableRow>

            <TableCell component="th" scope="row">

              <input

                type="text"

                id="txtrows"

                value={rowCount}

                onChange={(e) => setRowCount(e.target.value)}

              />

            </TableCell>

            <TableCell component="th" scope="row">

              <input

                type="text"

                id="txtcols"

                value={colCount}

                onChange={(e) => setColCount(e.target.value)}

              />

            </TableCell>

            <TableCell>

              <Button variant="contained" color="primary" onClick={CreateTable}>

                Create Table

              </Button>

            </TableCell>

          </TableRow>

        </TableBody>

      </Table>

      {showTable ? (

        <Table>

          <TableBody>

            {rowCountArray.map((row, index) => (

              <TableRow key={index}>

                {colCountArray.map((col, index) => (

                  <TableCell key={index}>

                    Row {row} - Col {col}

                  </TableCell>

                ))}

              </TableRow>

            ))}

          </TableBody>

        </Table>

      ) : null}

    </>

  );

}

单击“创建表”按钮，您可以创建一个函数并根据输入的计数生成一个rowCount数组colCount，

    const CreateTable = () => {

      rowCountArray.length = 0;

      colCountArray.length = 0;

      for (let i = 1; i <= rowCount; i++) {

         rowCountArray.push(i);

      }

      setRowCountArray(rowCountArray);

        

      for (let i = 1; i <= colCount; i++) {

         colCountArray.push(i);

      }

      setColCountArray(colCountArray);

        

     setShowTable(true);

   };

然后使用以下方法，您可以生成具有相应行和列的表，

{rowCountArray.map((row, index) => (

   <TableRow key={index}>

      {colCountArray.map((col, index) => (

        <TableCell key={index}>

          Row {row} - Col {col}

        </TableCell>

       ))}

   </TableRow>

 ))}