使用材料ui在反应js中创建动态表答案

【问题标题】：Creating Dynamic table in react js with material ui使用材料ui在反应js中创建动态表
【发布时间】：2020-09-28 11:35:51
【问题描述】：

我正在尝试使用 material-ui 在 react-js 中创建动态表，您可以在沙箱链接中看到我的方法，我不确定这样做是否正确，或者是否存在更好的方法.

在这段代码中，我无法从表格中获取单元格中输入的所有值，我了解 useState 的工作原理，但在这里我无法弄清楚我应该如何处理它，以便我可以有效地处理它的状态。
https://codesandbox.io/s/brave-noether-zukhy?file=/demo.js

import React from "react";
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";

const useStyles = makeStyles({
  table: {
    minWidth: 650
  }
});

export default function BasicTable() {
  const classes = useStyles();
  const parentValue = 4;
  const childValue = 1;
  const [data, setdata] = React.useState("");

  const generateTable = () => {
    let table = [];
    // Outer loop to create parent
    for (let i = 0; i < parentValue; i++) {
      let children = [];
      //Inner loop to create children
      for (let j = 0; j < childValue; j++) {
        children.push(
          <td>
            <InputBase
              defaultValue="TextInput"
              Value={data}
              onChange={(e) => {
                setdata(e.target.value);
              }}
            />
          </td>
        );
      }

      table.push(
        <TableRow key={i}>
          <TableCell>{children}</TableCell>
        </TableRow>
      );
      console.log(table);
      console.log(data);
    }
    return table;
  };

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableBody>{generateTable()}</TableBody>
      </Table>
    </TableContainer>
  );
}

【问题讨论】：

标签： reactjs datatable material-ui

【解决方案1】：

使用一个对象作为你的状态：

useState(() => {
  let finalState = {};
  for (let i = 0; i < parentValue; i++) {
   for (let j = 0; j < childValue; i++) {
     if (finalState[i]) {
       finalState[i] = {...finalState[i], [j]: ''};
     } else {
       finalState = { ...finalState, [i]: { [j]: '' } }
     }
   }
  }
  return finalState;
})

然后您可以在输入更改上更新正确的值：

<InputBase
  value={data[i][j]}
  onChange={(e) => {
    setdata(prev => ({
      ...prev,
      [i]: {
        ...prev[i],
        [j]: e.target.value
      }
    }))
  }}
/>

最后你需要在 parentValue 或 childValue 更新时更新你的状态，你可以使用 useEffect。

【讨论】：

else 语句中出现错误，value={data[i][j]}