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

我正在研究使用線性代數技術分析矩陣（https://en.wikipedia.org/wiki/Matrix_(mathematics)）的應用程序。我具有爲分析/計算創建的所有功能，但我無法確定如何在反應中設置動態大小的數字輸入形式。如何使用React/Redux爲輸入數組創建動態大小的表單？

我對如何實現它有一些想法（兩者都沒有像我希望的那樣工作）。一種方法是使用名爲Matrix的容器組件來實例化將用於實際獲取輸入的子Entry組件的分組。唯一的問題是如何最好地迭代這些條目並獲得它們的個別值。過去，搞清楚如何最好地展示它們也證明具有挑戰性。

在獲得合適的大小矩陣（使用商店狀態下的行和列值）之後，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> 
);`

的最終目標是創建陣列的與內部的號碼然後可以通過已經測試和創建的減速器添加到狀態的複合陣列。矩陣的形式爲：[[1,0]，[0,1]]爲2×2矩陣。所以最終它可能會看起來並在頁面上格式化爲：

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

然後可以將其轉換爲上述樣式矩陣。另外，要清楚，每個條目都是它自己的輸入標籤（技術上使用來自react-bootstrap的FormControl）。

來源

2016-12-16 Blake Geraci

問題是什麼？你有什麼錯誤嗎？渲染不正確？ – Noam

它混合渲染不正確（它只是將條目層疊在一起，因爲我不確定如何將條目放在FormGroup中以使行看起來像行）我也無法正確地查詢來自Entry組件的值我已經檢查了下面的內容，但是因爲數據打算在提交按鈕被擊中時發生改變和反映，所以我不知道如何在一個地方獲得所有的值。 http://stackoverflow.com/questions/22639534/pass-props-to-parent-component-in-react-js –

我想我明白，有一些方法來做到這一點，但我會用自己的方式

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>

你給爲例矩陣請注意，我刪除了大括號和回車，並使用速記

來源

2016-12-16 18:59:44 Noam

這是行得通的！我仍然需要做格式化，以便它們顯示爲行，但絕對修復問題的前半部分現在最後一部分是查詢所有Entry組件 –

這對於Redux來說是這樣的:)在這裏查看來自redux作者的這些精彩視頻：https：//egghead.io/courses/getting-started -with-終極版。也請接受這個答案來標記這個問題已解決。 – Noam

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

回答

相關問題