2016-12-16 2 views
1

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

私はそれを実装する方法についていくつか考えています(どちらもどちらもうまくいきませんでした)。 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を使用しています)。

+1

問題は何ですか?何かエラーが出ますか?間違ってレンダリングする? – Noam

+0

これは、誤ってレンダリングが混在している(行のような行を取得するためにFormGroup内のエントリを囲む方法がわからないため、エントリを重ね合わせるだけです。私は以下をチェックアウトしましたが、データが変更され、送信ボタンがヒットしたときに反映されるため、すべての値を1か所で取得する方法がわかりません http://stackoverflow.com/questions/22639534/pass-props-to-parent-component-in-react-js –

答えて

0

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

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

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

+0

それは機能します!私はまだ行として表示するように書式設定を行う必要がありますが、それは間違いなく修正します問題の最初の半分。最後の部分は、すべてのエントリコンポーネントを照会しています。 –

+0

これはReduxで行うことです:ここでredux著者からのこれらの素晴らしいビデオを見てください:https://egghead.io/courses/getting-started -with-redux。また、この問題を解決済みとしてマークするには、この回答を受け入れてください。 – Noam

関連する問題