如何使用React / Redux為輸入數組創建動態大小的表單？

Question

我正在使用線性代數的技術來分析矩陣的應用程序（ https://en.wikipedia.org/wiki/Matrix_(mathematics） ）。 我已經創建了用於執行分析/計算的所有功能，但是在弄清楚如何在React中設置動態大小形式的數字輸入時遇到了麻煩。

對於如何實現它，我有一些想法（兩者都沒有達到我的期望）。 一種是使用名為Matrix的容器組件，該組件實例化一組子Entry組件，這些子Entry組件將用於實際獲取輸入。 唯一的問題是如何最好地遍歷這些條目並獲得其各自的值。 除此之外，弄清楚如何最好地顯示它們也被證明具有挑戰性。

在獲得正確的大小矩陣（使用商店狀態中的row和col值）之后，Array.prototype.map似乎是一種可靠的方法，但是組件的組織卻難以捉摸。 當前從行中獲取行和列，然后將其作為道具傳遞到Matrix組件。

render() {
let arr = [];
for (let i = 0; i < this.props.rows; i++) {
  arr[i] = [];
  for (let j = 0; j < this.props.cols; j++) {
    arr[i][j] = `${i},${j}`;
  }
}

var entries = arr.map((rows, i) => {
  return rows.map((cols, j) => {
    return <Entry id={`${i},${j}`} value={0}/>
  });
});
console.log(arr);
console.log(entries);

return (
  <div>
    {entries}
  </div>
);`

最終目標是創建一個內部編號為數字的數組的復合數組，然后可以通過已測試和創建的reducer將其添加到狀態中。 矩陣的形式為：[[1,0]，[0,1]]用於2x2矩陣。 因此，最終它可能會在頁面上看起來和被格式化為：

`<Entry id={"0,0"} /> <Entry id={"0,1"} />
 <Entry id={"1,0"} /> <Entry id={"1,1"} />`

然后可以將其轉換為上述樣式矩陣。 同樣，要清楚，每個條目都是其自己的輸入標簽（技術上是使用react-bootstrap中的FormControl）。

Answer 1

我想我知道，有幾種方法可以做到，但我會按照你的方式去做

render() {
  let arr = [];
  for (let i = 0; i < this.props.rows; i++) {
    arr[i] = [];
    for (let j = 0; j < this.props.cols; j++) {
      arr[i][j] = `${i},${j}`;
    }
  }

  console.log(arr);
  console.log(entries);

  return (
    <div>
      {arr.map((rows, i) =>
        <FormGroup>
          {rows.map((cols, j) =>
            <Entry id={`${i},${j}`} value={0}/>
          )}
        </FormGroup>
      )}
    </div>
  );
}

在這里你會得到

<FormGroup>
  <Entry>
  <Entry>
</FormGroup>
<FormGroup>
  <Entry>
  <Entry>
</FormGroup>

對於您作為示例給出的矩陣，請注意，我刪除了大括號和return並使用了簡寫形式