React/Reduxを使用して入力配列に対して動的なサイズのフォームを作成するにはどうすればよいですか？

Question

私は、線形代数からのテクニックを使って行列（https://en.wikipedia.org/wiki/Matrix_(mathematics)）を解析するためのアプリケーションに取り組んでいます。私は分析/計算を行うために作成されたすべての関数を持っていますが、反応の中で動的に数値入力されたフォームを設定する方法を考え出すのは難しいです。

私はそれを実装する方法についていくつか考えています（どちらもどちらもうまくいきませんでした）。 1つはMatrixというコンテナコンポーネントを使用し、実際に入力を取得するために使用される子エントリコンポーネントのグループをインスタンス化します。唯一の問題は、それらのエントリを最適に反復して個々の値を取得する方法です。これを過ぎて、それらを最適に表示する方法を考え出すことも難しいことです。

Array.prototype.mapは、適切なサイズの行列（ストアの状態で行と列の値を使用）を取得した後は堅実に見えますが、コンポーネントの構成は分かりません。行と列は現在ストアから取得され、次に行列コンポーネントに渡されます。

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

最終目標は、その後、既にテストされ、作成された減速を介して状態に追加することができ、その内部番号の配列の複合配列を作成することです。行列の形式は、2x2行列の[[1,0]、[0,1]]です。最終的にはページ上で次のように表示され、フォーマットされます：

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

これは上記のスタイルマトリックスに変換できます。また、明確にするために、各エントリは独自の入力タグです（技術的には、反応起動ストラップのFormControlを使用しています）。

Answer 1

は、私はあなたが一例として与えた行列について

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

を取得しますが、私はあなたの方法ここで

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

に行くよそれを行うにはいくつかの方法がありますが、私は理解して考えます 中括弧と戻り値を削除して略語を使用することに注意してください。