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

Question

我正在尝试在 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网格的想法？我希望它最终根据用户提供的行和列值进行调整。

Answer 1

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

一个解决方案类似于

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，可能符合你的要求。