बाह्य घटक की प्रतिक्रिया-बूटस्ट्रैप कॉल विधि

Question

मैं एक मॉडल प्रारूप लॉन्च करने के लिए प्रतिक्रिया-बूटस्ट्रैप का उपयोग कर रहा हूं।

है कि मैं एक मॉडल घटक PopupForm, एक रूप घटक ProductForm बनाया करने के लिए, एक उत्पाद घटक, उत्पाद घटक में मैं

<ModalTrigger 
    modal={<PopupForm form={<ProductForm ref="pform" data={this.props.prod_data} />}/>}> 
     <Button bsStyle='primary' bsSize='small' style={{marginRight:'5px'}} > 
      <span className="glyphicon glyphicon-pencil" /> 
     </Button> 
</ModalTrigger> 

PopupForm फोन:

var PopupForm = React.createClass({ 
    render: function(){ 
     return (
      <Modal {...this.props} bsStyle='primary' 
        style={{width:200}} title='Edition' animation={false}> 
      <div className='modal-body'> 
       {this.props.form} 
      </div> 
      <div className='modal-footer'> 
       <Button onClick={this.props.form.submit()}>Editer</Button> 
       <Button onClick={this.props.onRequestHide}>Close</Button> 
      </div> 
      </Modal> 
     ) 
    } 
}); 

इस onClick editer पर, मैं ProductForm घटक की विधि submit पर कॉल करना चाहता हूं, ProductForm घटक PopupForm पर भेजता है प्रोप फॉर्म, मैं इसे {this.props.form} की तरह प्रदर्शित करता हूं, लेकिन मैं विधि {this.props.form.submit()} पर कॉल नहीं कर सकता हूं असल में मैं उत्पादफॉर्म विधि को ट्रिगर करने के लिए मोडल बटन का उपयोग करना चाहता हूं यदि यह संभव नहीं है तो मैं ProductForm के अंदर सबमिट बटन का उपयोग करूंगा।

यहाँ मेरी ProductForm है:

var ProductForm = React.createClass({ 

    componentDidMount: function() { 
     this.props.submit = this.submit; 
    }, 


    getInitialState: function() { 
     return {canSubmit: false}; 
    }, 

    enableButton: function() { 
     this.setState({ 
     canSubmit: true 
     }); 
    }, 
    disableButton: function() { 
     this.setState({ 
     canSubmit: false 
     }); 
    }, 
    submit: function (model) { 
     alert('ok'); 
    }, 
    render: function() { 
     return (

      <Formsy.Form className="" name="test" onValidSubmit={this.submit} onValid={this.enableButton} onInvalid={this.disableButton}> 


       <CsInput value={this.props.data.name} 
       label="Nom" id="product_name" 
       name={this.props.data.name} 
       validations={{matchRegexp: /^[A-Za-z0-9]{1,30}$/}} 
       validationError={validations_errors[1]} required/> 



       {/*<button type="submit" disabled={!this.state.canSubmit}>Submit</button>*/} 


      </Formsy.Form> 
    ); 
    } 
    }); 

अग्रिम धन्यवाद।

Answer 1

अगर आप नेस्ट है घटकों तुम इतनी जैसे अन्य किसी के फ़ंक्शन को कॉल कर सकते हैं:

बाल:

var Component1 = React.createClass({ 
    render: function() { 
     return (
      <div><button onClick={this.props.callback}>click me</button></div> 
     ) 
    } 
}) 

जनक:

var Component2 = React.createClass({ 
    doSomethingInParent: function() { 
     console.log('I called from component 2'); 
    }, 
    render: function() { 
     return (
      <div><component1 callback={this.doSomethingInParent} /></div> 
     ) 
    } 
}) 

ही अपने मामले में चला जाता है । यह आपके कोड में बहुत स्पष्ट नहीं था इसलिए मैं स्वयं कोड के साथ आपकी मदद नहीं कर सका। यदि आप इसके साथ गन्दा हो जाते हैं तो कृपया अपने पूरे कोड को पदानुक्रमित तरीके से पोस्ट करें ताकि यह और अधिक पठनीय हो।