Phương pháp gọi phản hồi-bootstrap của thành phần bên ngoài

Question

Tôi đang sử dụng phản ứng-bootstrap để khởi chạy biểu mẫu phương thức.

Để làm được điều mà tôi tạo ra một thành phần modal PopupForm, một thành phần hình thức ProductForm, một thành phần sản phẩm, trong thành phần sản phẩm mà tôi gọi

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

On onClick editer này, Tôi muốn gọi phương thức submit của thành phần ProductForm, thành phần ProductForm được gửi đến PopupForm trong hình thức prop, tôi hiển thị nó như thế này {this.props.form}, nhưng tôi không thể gọi phương thức {this.props.form.submit()} Thực ra tôi muốn sử dụng nút phương thức để kích hoạt phương thức ProductForm nếu không, tôi sẽ sử dụng nút gửi bên trong ProductForm.

Đây là tôi 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> 
    ); 
    } 
    }); 

Cảm ơn trước.

Answer 1

linh kiện nếu bạn đã lồng bạn có thể gọi chức năng một trong những khác giống như vậy:

Child:

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

phụ huynh:

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

Cùng đi trong trường hợp của bạn . Nó không phải là rất rõ ràng trong mã của bạn vì vậy tôi không thể giúp bạn với mã Itself. Nếu bạn nhận được lộn xộn với điều này xin vui lòng gửi toàn bộ mã của bạn Trong một cách Hierarchically vì vậy Nó sẽ dễ đọc hơn.