dış bileşenin

Question

ait Tepki-önyükleme çağrı yöntemi ben kalıcı form başlatmak için tepki-ön yükleme alanı kullanıyorum.

Ben kalıcı bir bileşeni PopupForm, form bileşeni ProductForm oluşturulan Bunu yapmak için, bir ürün bileşeni, ürün bileşeninde ben

<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 çağrı:

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

bu onClick editer günü, Ben yöntemini ProductForm bileşenin submit çağırmak istiyorum, ProductForm bileşeni içinde PopupForm göndermek olduğunu prop formu, ben bu {this.props.form} gibi göstermek, ama Aslında bu mümkün değil ise bir ProductForm içine Gönder düğmesini kullanacak ProductForm yöntemi tetiklemek için kalıcı düğmesini kullanmak istiyorum yöntemini {this.props.form.submit()} diyemezsin.

İşte benim ProductForm geçerli: önceden

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

teşekkürler.

Answer 1

yuvalanmış varsa bileşenleri bu kadar gibi diğer kişinin işlevini çağırabilirsiniz:

Çocuk:

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

Veli:

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

aynı sizin durumunuzda gider . Kodunuzda çok açık değildi, bu yüzden size Kendisi koduyla yardım edemedim. Eğer bununla karışıklık yaşıyorsanız, lütfen tüm kodunuzu Hiyerarşik bir şekilde yayınlayın, böylece daha okunaklı olacaktır.