以表單形式訪問兒童

我無法真正訪問組件中動態生成的兒童。我在互聯網上發現了一些案例，這似乎是一個普遍的問題，但沒有任何我可以正確地涉及或它沒有真正有效的記錄，所以我變得更加困惑。以表單形式訪問兒童

我有一個窗體，它有一個按鈕，每次按下按鈕，子窗體都會添加到窗體中。

render: function() { 
    var prop_forms = []; 
    for(var i = 1; i <= this.state.count; i++){ 
    prop_forms.push(<App.Form.Property reference={i}/>); 
    } 
    return(
    <div> 
     <h2>New model</h2> 
     <form className="form" callback={this.submited}> 
     <label>Name:</label> 
     <input type="text" ref="name" className="fancy_input" required/> 
     <label><input type="checkbox" ref="include_endpoints"/> Include basic endpoints</label> 
     <h3>Properties <a onClick={this.add_property}><span className="glyphicon glyphicon-plus"></span></a></h3> 
     {prop_forms} 
     <button className="btn" onClick={this.submited} type="button">Add model to the canvas</button> 
     </form> 
    </div> 
); 
}

每次

一個點擊一個按鈕，this.state.count遞增，所以我得到一個更App.Form.Property組件。我通過我的變量，所以我可以使用它在我的參數在App.Form.Property組件。

render: function(){ 
    var input_ref = "property_"+this.props.reference+"_input"; 
    var select_ref = "property_"+this.props.reference+"_select"; 
    return(
    <div className="property_form"> 
     <input className="fancy_input" ref={input_ref} type="text" placeholder="Property name..."/> 
     <select className="fancy_select" ref={select_ref}> 
     <option value="string">String</option> 
     <option value="integer">Integer</option> 
     <option value="double">Double</option> 
     </select> 
    </div> 
); 
}

我的問題是，當我提交表格時，我無法通過參考訪問孩子。我只能解決名稱和include_endpoints，但沒有任何來自App.Form.Property組件。

來源

2014-09-24 user1377911

你能上，爲什麼你需要訪問孩子們做出詳細的表單組件？如果您需要在家長中通過撥打電話給孩子，可以訪問孩子參考。例如，如果你的''組件在它的渲染函數中調用了''，如果你將它改成''那麼你就可以通過'this .refs.myChild'和該子內的任何引用都可以通過'this.refs.myChild.refs.myChildRef'訪問。 – 2014-09-24 15:40:11

我需要訪問子項，因爲當表單被髮送時，我需要從父項的方法中收集來自所有子項的數據。孩子們就像一個子表格。 – user1377911 2014-09-24 17:13:12

我把ref屬性放在所以現在我能夠獲得子組件，但是如果我想訪問子組件中的輸入，我必須像「this.refs.property_1.getDOMNode（）。children [0 ] .value「，這看起來不像是一個乾淨的解決方案。 – user1377911 2014-09-24 20:03:24

添加功能getSubmitData中封裝了孩子們從外部元件

來源

2014-10-11 09:00:45

以表單形式訪問兒童

回答

相關問題