反應以形式訪問兒童

Question

我實際上無法訪問組件中動態生成的子代。 我在互聯網上發現了一些案例，這似乎是一個普遍的問題，但是我沒有適當的聯系，或者沒有得到很好的記錄，因此我感到更加困惑。

我有一個帶有按鈕的表單，每按一次該按鈕，就會向該表單添加一個子表單。

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組件。 我正在傳遞i變量，以便可以在App.Form.Property組件的ref參數中使用它。

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

我的問題是，當我提交表格時，我無法通過ref訪問孩子。 我只能解決name和include_endpoints的問題，而不能解決App.Form.Property組件的問題。

Answer 1

在表單組件中添加一個函數getSubmitData，該函數封裝來自外部元素的子代