在 reactJs 中创建带有标题的动态表的问题

Question

我正在尝试根据带有标题的输入（行数和列数）创建动态表， 并将其值存储在字典变量列表中，其中键将是标题数据，值将是行数据。

问题： 我的行部分工作正常，但是当我尝试将 +1 行作为标题时，当我的 rowValue 大于 1 时我会遇到问题 为了更好地理解，请点击下面的沙盒链接

https://codesandbox.io/s/serene-dhawan-6xod9?file=/src/demo.js

   // let rowVariable = 1;
    // rowVariable = rowValue + rowVariable
    let table = [];
    // Outer loop to create parent
     // for (let i = 0; i < rowVariable ; i++) { or
    // for (let i = 0; i < rowValue ; i++) {
    for (let i = 0; i < rowValue +1 ; i++) {

上面的 for 循环位于沙盒中的第 77 行，如果我从 rowValue 中删除 +1，代码对于行部分工作正常，我没有任何行作为标题，但使用 +1 我得到标题（在默认行) 但是当我增加 rowValue 时，我得到了多行。

我无法调试导致此问题的原因。 感谢您的帮助。

CODE:

import React, { Fragment, useState, useRef, useEffect } from "react";
// Material-ui imports
import { fade, withStyles } from "@material-ui/core/styles";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import InputBase from "@material-ui/core/InputBase";
import TextField from "@material-ui/core/TextField";
const useStyles = makeStyles({
  table: {
    minWidth: 650
  }
});
const BootstrapInput = withStyles((theme) => ({
  root: {
    "label + &": {
      marginTop: theme.spacing(3)
    }
  },
  input: {
    borderRadius: 4,
    position: "relative",
    backgroundColor: theme.palette.common.white,
    border: "1px solid #ced4da",
    fontSize: 16,
    width: "60%",
    padding: "5px 6px",
    transition: theme.transitions.create(["border-color", "box-shadow"]),
    "&:focus": {
      boxShadow: `${fade(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`,
      borderColor: theme.palette.primary.main
    }
  }
}))(InputBase);

export default function DataTabelVariable(props) {
  // Table
  const classes = useStyles();
  const [rowValue, setRowValue] = useState(0);
  const [columnsValue, setColumnsValue] = useState(0);
  const [tableCellsData, setTableCellsData] = useState();
  const [tableArrayData] = useState([[]]);
  const ref = useRef(null);

  const getUniqueKeyFromArrayIndex = (rowNum, columnNum) => {
    return `${rowNum}-${columnNum}`;
  };

  const onChangeHandler = (e) => {
    setTableCellsData({
      ...tableCellsData,
      [e.target.name]: e.target.value
    });
    let [row, col] = e.target.name.split("-");
    row = parseInt(row);
    col = parseInt(col);

    if (!tableArrayData[row]) {
      tableArrayData[row] = [];
      tableArrayData[row].push([]);
    }
    tableArrayData[row][col] = e.target.value;
    props.value(tableArrayData);
  };

  const generateTable = () => {
    // let rowVariable = 1;
    // rowVariable = rowValue + rowVariable
    let table = [];
    // Outer loop to create parent
     // for (let i = 0; i < rowVariable ; i++) { or
    // for (let i = 0; i < rowValue ; i++) {
    for (let i = 0; i < rowValue +1 ; i++) {
      let children = [];
      //Inner loop to create children
      for (let j = 0; j < columnsValue; j++) {
        children.push(
          <td>
            <BootstrapInput
              name={getUniqueKeyFromArrayIndex(i, j)}
              onChange={onChangeHandler}
            />
          </td>
        );
      }
      table.push(
        <TableRow key={i}>
          <TableCell>{children}</TableCell>
        </TableRow>
      );
    }
    return table;
  };

  return (
    <Fragment>
      <div>
        <h5>Select Row number and Columns number</h5>
        <div className={"rowColumnsNumber"} style={{ marginTop: 20 }}>
          <TextField
            id="Row-number"
            label="Row(s)"
            type="number"
            InputLabelProps={{ shrink: true }}
            inputProps={{ min: "0", max: "1000", step: "1" }}
            onChange={(e) => setRowValue(e.target.value)}
            variant="outlined"
          />
          <TextField
            id="Columns-number"
            label="Columns(s)"
            type="number"
            inputProps={{ min: "0", max: "1000", step: "1" }}
            InputLabelProps={{ shrink: true }}
            onChange={(e) => setColumnsValue(e.target.value)}
            variant="outlined"
          />
        </div>
        <br />
        <div className={"TableContainer"}>
          <TableContainer component={Paper}>
            <Table className={classes.table} aria-label="simple table">
              <TableBody ref={ref}>{generateTable()}</TableBody>
              {/* <TableBody> {generateTable()}</TableBody> */}
            </Table>
          </TableContainer>
        </div>
      </div>
    </Fragment>
  );
}

Answer 1

在上面的代码中，您将第 112 行和第 121 行中的 rowValue 和 columnsValue 的值分别设置为字符串而不是整数。原因是 e.target.value 会给你一个类似“1”而不是整数 1 的字符串。因此，for 循环中的条件为真，因为它将比较 i 的值与 ASCII 值“1”（其中是49)。因此，您必须使用parseInt(e.target.value,10) 将e.target.value 的值转换为int，它会按预期工作。