React 以形式访问子项答案

【问题标题】：React accessing children in formReact 以形式访问子项
【发布时间】：2014-11-18 21:18:33
【问题描述】：

我无法真正访问组件中动态生成的子项。我在互联网上找到了一些案例，这似乎是一个常见问题，但我无法正确关联，或者没有很好的文档记录，所以我更加困惑。

我有一个带有按钮的表单，每次按下按钮时，都会将子表单添加到表单中。

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 组件中什么也没有。

【问题讨论】：

您能否详细说明为什么需要访问孩子？如果您需要在父级中访问子级引用，您可以通过在子级上添加一个引用来访问子级引用。因此，例如，如果您的<Parent /> 组件在其渲染函数中调用<Child />，如果您将其更改为<Child ref="myChild" />，那么您将能够通过this.refs.myChild 在父级中访问它，并且该子级中的任何引用都是可通过this.refs.myChild.refs.myChildRef 访问。
我需要访问子节点，因为发送表单时，我需要在父节点的方法中收集所有子节点的数据。孩子们就像一个子表单。
我将 ref 属性放在上，所以现在我可以获取子组件，但是如果我想访问子组件中的输入，我必须像“this.refs”一样.property_1.getDOMNode().children[0].value" 对我来说这不是一个干净的解决方案。
你应该可以做类似this.refs.property_1.refs.childprop.refs.inputProp.getDOMNode()的事情。

标签： javascript forms reactjs ref

【解决方案1】：

在表单组件中添加一个函数 getSubmitData 来封装来自外部元素的子元素

【讨论】：