[英]React accessing children in 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>
);
}
每次单击按钮,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组件的问题。
在表单组件中添加一个函数getSubmitData,该函数封装来自外部元素的子代
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.