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

Question

我是reactjs小白，这个月开始学习，这里我尝试创建useState变量，它的数据以多维数组的方式存储，或者只是数组。此变量的输入来自动态 tables 单元格，这些单元格是根据行号和列号创建的。此 link 已创建 table 部分，我在数组

中存储数据时遇到问题

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）中维护 table 的数据，那么 name 属性可以在这里为您提供帮助，因为它表示由连字符分隔的行号和列号。只需获取 name 属性值，在连字符和中提琴上拆分！你会有行号和列号，之后你只需要使用它们来设置数组中的数据。

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

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

create dynamic table using multidimensional array and store data in state

javascript

multidimensional-array

reactjs

use-state