从用户定义的输入制作输入矩阵

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>;
  });

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

这应该可以让您了解问题的基础知识。 从那里开始，将这些呈现为表格中的单元格等可能会更清晰。

随意查看可能符合您想要的网格布局。