如何從父組件中動態添加子組件值時訪問子組件值？

Current Working Example如何從父組件中動態添加子組件值時訪問子組件值？

我創建具有不同數量的基礎上，從一個選擇框的用戶選擇輸入元素的搜索形式。

我要打破這種分爲三個組成部分，一個叫SearchContainer包裝，一個叫SearchSelect選擇框，以及組件中的輸入稱爲SearchWithTwo和SearchWithOne只是爲了舉例起見。

App └─SearchContainer Form │ SearchSelect │ ... any one of the multiple search inputs (SearchWithOne, SearchWithTwo)

當用戶改變選擇框被裝載其中包含輸入的相關分量的值。該組件可以有1到10個輸入。我見過的所有例子都使用ref提到，如果我的輸入沒有改變，那將會很棒。

目前，我有它的工作通過使用onSubmit處理以下爲SearchContainer

handleSubmit: function(e) { 
    e.preventDefault(); 
    var form = this.getDOMNode(); 

    [].forEach.call(form.elements, function(e){ 
     // get the values 
    }); 

    // submit the values to get results. 
}

然而，這並不覺得自己是正確的方式來這樣做。是否有更好的推薦方法來遍歷子組件並閱讀它們的狀態？或者我可以以某種方式讓孩子進入父母狀態並獲得這些價值觀？

來源

2015-02-23 Loktar

在我看來，輸入數據可以存儲在數組中，因爲它改變（根據需要在輸入上使用onchange或onkeydown事件）。然後，您不需要遍歷DOM元素來處理提交。 – 2015-02-23 21:03:46

@AustinMullins嗯我不確定你的意思我猜。例如，用戶可能從一個輸入開始，然後將其更改爲5（用於其他搜索），然後將其更改回來。您是否建議僅將數組數據保留在搜索容器中並從兒童組件更改事件修改它？ – Loktar 2015-02-23 21:08:00

是的。基本上，@ carb0nshel1和我所說的是，你的數據應該被包含一個數組/列表搜索條件的模型封裝，並且可能還有多少條目實際上處於活動狀態。 – 2015-02-23 21:10:37

我想我有一個解決方案，形式爲fork of your fiddle，我將介紹下面的主要思想。

首先，我不是React專家，但我喜歡它的想法，而且我知道它越來越受歡迎，所以我想了解更多信息。我不知道的是使用composition or inheritance減少下面顯示的代碼重複的正確方法。

基本上，我的想法是爲每個search類添加一個方法，將其state公開給調用類。這也是在這裏實現爲createClass裏面調用一個很簡單的功能：

getData: function() { 
    return this.state; 
},

它是如此簡單，必須有創建一個基類或混合類用此方法，然後繼承/組合在它與方式其他類。我只是不知道如何。現在，只要將這些行復制粘貼到任何有意義的位置，就可以公開組件的狀態。

請記住，這是每個人都喜歡的Flux體系結構。在Flux中，狀態總是來自React組件外部的源對象。

無論如何，現在放棄更大的架構問題，您可以通過在handleSubmit方法中調用getData來獲取變量state。沒有DOM遍歷要求：

handleSubmit: function(e) { 
    e.preventDefault(); 
    var form = this.getDOMNode(), 
     fd = new FormData(form); 

    var submitData = this.state.SearchBox.getData(); 

    // submit the values to get results. 
},

來源

2015-02-23 21:34:18

是的，我目前使用助焊劑（迴流實施）。我從評論中提出了你的想法，並開始實施它，但我做的有點不同。基本上我現在已經在輸入組件中提交了，並且我讓事件通過狀態傳遞給父項。所以我在我的輸入組件中提交了處理程序，並且在接收狀態數據的父代中提交了一個處理程序。非常感謝您的回答！ – Loktar 2015-02-23 21:42:19

好吧，很高興我幫了我的忙。這聽起來像你一直在正確的軌道上，但是。 – 2015-02-23 21:58:41

如何從父組件中動態添加子組件值時訪問子組件值？

回答

相關問題