使用多维数组创建动态表并将数据存储在状态中

Question

我是 reactjs 的菜鸟，我这个月开始学习它，在这里我试图创建 useState 变量，它的数据以多维数组的方式存储，或者只是数组。此变量的输入来自动态表格单元格，这些单元格是根据行号和列号创建的。 此链接已创建表格部分，我面临将数据存储在数组中的问题

https://codesandbox.io/s/new-glitter-lepkk?file=/src/demo.js

import React, { Fragment, useState } 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() {
  // Table
  const classes = useStyles();
  const [rowValue, setRowValue] = useState(0);
  const [columnsValue, setColumnsValue] = useState(0);
  const [tableCellsData, setTableCellsData] = useState();

  // const [jsonVar, setJsonVar] = useState({});
  // var dictVarKey = {};
  // var dictVarValue = {};
  // var jsonVar = {}


  const getUniqueKeyFromArrayIndex = (rowNum, columnNum) => {
    return `${rowNum}-${columnNum}`;
  };
  // const onChangeHandler = (e) => {
  //   console.log(e.target.name, e.target.value);
  //   setTableCellsData({
  //     ...tableCellsData,
  //     [e.target.name]: e.target.value
  //   });
  // };

  const onChangeHandler = (e) => {
    // console.log(e.target.name, e.target.value);
    setTableCellsData({
      ...tableCellsData,
      [e.target.name]: e.target.value
  });
    // console.log(Object.keys(tableCellsData));

    // for (var key in tableCellsData) {
    //   var value = tableCellsData[key];
    //   const splitVar = key.split("-");
    //   if (parseInt(splitVar[0], 10) === 0) {
    //     dictVarKey[splitVar[1]] = value;
    //   } else if (parseInt(splitVar[0], 10) > 0) {
    //     dictVarValue[splitVar[1]] = value;
    //   }
    // }

    // for (var Kkey in dictVarKey) {
    //   for (var Vkey in dictVarValue) {
    //     if (Kkey === Vkey) {
    //       jsonVar[dictVarKey[Kkey]] = dictVarValue[Vkey];
          
    //     }
    //   }
    // }
    // console.log(dictVarKey);
    // console.log(dictVarValue);
    // console.log(jsonVar);
    //   for (let i = 0; i<rowValue; i++){
    //     for (let j=0;j <columnsValue; j ++ ){

    //     }

    //   }
  };

  const generateTable = () => {
    let table = [];
    // Outer loop to create parent
    for (let i = 0; i < rowValue; 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>
      );
      // console.log(tableCellsData);
    }
    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>{generateTable()}</TableBody>
            </Table>
          </TableContainer>
        </div>
      </div>
    </Fragment>
  );
}

Answer 1

大部分工作已经完成。 如果您想在多维数组（在这种情况下为 2d）中维护表的数据，那么 name 属性可以在这里为您提供帮助，因为它表示由连字符分隔的行号和列号。 只需获取名称属性值，在连字符和中提琴上拆分！您将拥有行号和列号，之后您只需要使用它们来设置数组中的数据。

我已更新codesandbox (check console to see the data array)。更新的代码在第 74 行和第 84 行之间