0

I can not really access my dynamically generated children in a component. I found some cases on the internet, it seems like a common problem but nothing i could properly relate to or it was not really well documented so i got more confused.

I have a form which has a button and every time a press the button, subform is added to the form.

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

every time a click a button, this.state.count is incremented so I get one more App.Form.Property component. I am passing the i variable so i can use it in my ref parameter in the App.Form.Property component.

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

My problem is that when i submit the form, I can not access the children via ref. I can only address name and include_endpoints but nothing from the App.Form.Property component.

Deduplicator
  • 44,692
  • 7
  • 66
  • 118
user1377911
  • 7,285
  • 5
  • 18
  • 16
  • Can you elaborate on why you need to access the children? You can access child refs if you need to in a parent by having a ref on the child as you call it. So for example if your `` component was calling `` in it's render function, if you change that to `` then you'll be able to access it in the parent via `this.refs.myChild` and any refs inside that child are accessible as `this.refs.myChild.refs.myChildRef`. – Mike Driver Sep 24 '14 at 15:40
  • I need to access the children because when the form is sent, i need to collect the data from all the children in a method of the parent. The children are just like a sub-form. – user1377911 Sep 24 '14 at 17:13
  • I put the ref attribute on the so now I am able to get the child component but if I want to access the input in the child component i have to go like "this.refs.property_1.getDOMNode().children[0].value" and that does not look like a clean solution to me. – user1377911 Sep 24 '14 at 20:03
  • 1
    You should be able to do something like `this.refs.property_1.refs.childprop.refs.inputProp.getDOMNode()`. – Mike Driver Sep 25 '14 at 11:04

1 Answers1

0

Add a function getSubmitData in your form component that encapsulates the children from the outer element

Daniel Sont
  • 34
  • 3