Question

我正在尝试使用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>
  );
}

Answer 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。

在带有材质ui的react js中创建动态表

1 个答案: