從用戶定義的輸入制作輸入矩陣

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

在優化解決方案時，最好將行/列計數提取到它們自己的變量中。

這應該可以讓您了解問題的基礎知識。 從那里開始，將這些呈現為表格中的單元格等可能會更清晰。

隨意查看可能符合您想要的網格布局。