根据用户定义的输入制作输入矩阵

如何解决根据用户定义的输入制作输入矩阵

我试图在React中执行以下操作：

1. 用户输入行和列
2. 根据空白输入的反应创建一个网格，显示为具有正确尺寸的网格。

到目前为止，我有以下内容。为了简便起见，在此我假设用户输入的行和列均为3：

import React from "react";
import "./App.css";

function App() {
  // create a 3x3 matrix with some blank inputs as values values
  const matrix = Array.apply(null,Array(9)).map(function (x,i) {
    return <input></input>;
  });

  return <div className="App">{matrix}</div>;
}

export default App;

现在，这给了我如下所示的输出：

有人可以给我一些有关如何将以上内容变成3x3网格的想法吗？我希望它最终根据用户提供的行和列值进行调整。

解决方法

当前，您正在创建一个由9个元素组成的基本数组。将其分为行和列的最合乎逻辑的方法可能是创建3个数组，每个数组包含3个输入元素，然后在<div>之类的东西中分隔每组3个输入，以便将它们呈现在单独的行上。>

一种解决方案是类似

const matrix = Array.apply(null,Array(3))
  .map(function (x,i) {
    const col = Array.apply(null,Array(3))
      .map(function (y,j) {
        return <input></input>
      });

    return <div>{col}</div>;
  });

在优化解决方案时，最好将行/列计数提取到自己的变量中。

那应该使您了解问题的基础。从那里，将它们呈现为表格等中的单元格可能会更干净。

随时查看grid layouts，它可能与您想要的相符。