양식에있는 자식에 대한 액세스가 적절합니다.

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 구성 요소가 추가됩니다. App.Form.Property 구성 요소의 ref 매개 변수에 사용할 수 있도록 i 변수를 전달합니다.

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

당신이 아이들에 액세스해야하는 이유에 정교한 외부 요소