Method for calling react-bootstrap of an external component

Question

I use action-bootstrap to run a modal form.

To do this, I created a modal component PopupForm , a component of the ProductForm form, a product component, in the product component that I call

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

In this onClick Editer, I would like to name the submit method of the ProductForm component, the ProductForm component ProductForm sent to PopupForm in the form of a proforma, I display it like this: {this.props.form} , but I can not call the {this.props.form.submit()} method {this.props.form.submit()} Actually, I would like to use a modal button to launch the ProductForm method if this is not possible. I will use the submit button inside ProductForm.

Here is my 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> ); } }); 

Thanks in advance.

Answer 1

If you have nested components, you can call another function as follows:

Child:

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

Parent:

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

The same thing happens in your case. This was not very clear in your code, so I could not help you with the code itself. If you are confused about this, post all your code Hierarchically to make it more readable.