Metoda wywołania metody bootstrap z zewnętrznego komponentu

Question

Używam reakcji-ładowania początkowego, aby uruchomić formularz modalny.

W tym celu stworzyłem składnik modalne PopupForm, składnik formularz ProductForm, składnik produktu, w składniku produktu Wzywam

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

Na tej onClick editer, Chciałbym nazwać metodę submit składnika ProductForm, komponent ProductForm jest wysyłany do PopupForm w formularz wniosku, wyświetlam go w ten sposób {this.props.form}, ale nie mogę nazwać metody {this.props.form.submit()} Właściwie chciałbym użyć przycisku modalnego, aby uruchomić metodę ProductForm, jeśli nie jest to możliwe Będę używał przycisku przesyłania wewnątrz ProductForm.

Oto mój 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> 
    ); 
    } 
    }); 

góry dzięki.

Answer 1

jeśli zagnieżdżone elementy można wywołać funkcję drugi jest tak:

dziecka:

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

nadrzędny:

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

samo w przypadku . W twoim kodzie nie było to zbyt jasne, więc nie mogłem ci pomóc z samym kodem. Jeśli wpadniesz w takie zamieszanie, opublikuj cały swój kod w hierarchiczny sposób, aby był bardziej czytelny.