Metodo di chiamata React-bootstrap del componente esterno

Question

Sto utilizzando react-bootstrap per avviare un modulo modale.

per farlo ho creato un componente modale PopupForm, un componente modulo ProductForm, un componente di prodotto, nella componente del prodotto che io chiamo

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

Su questo onClick Editer, Vorrei chiamare il metodo submit del componente ProductForm, il componente ProductForm viene inviato a PopupForm in il modulo prop, lo visualizzo in questo modo {this.props.form}, ma non posso chiamare il metodo {this.props.form.submit()} In realtà mi piacerebbe utilizzare il pulsante modale per attivare il metodo ProductForm se non è possibile Userò un pulsante di invio all'interno del ProductForm.

Ecco il mio 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> 
    ); 
    } 
    }); 

Grazie in anticipo.

Answer 1

componenti se avete nidificate è possibile chiamare dell'altro una funzione in questo modo:

bambini:

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

principale:

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

stesso vale nel tuo caso . Non era molto chiaro nel tuo codice quindi non potevo aiutarti con il codice stesso. Se ti trovi in ​​disordine, per favore pubblica tutto il tuo codice in modo gerarchico, quindi sarà più leggibile.