forms – 外部组件的React-bootstrap调用方法

发布时间：2020-12-15 20:31:08 所属栏目：百科来源：网络整理

导读：我正在使用react-bootstrap来启动模态表单. 为此,我在我调用的产品组件中创建了一个模态组件PopupForm,一个表单组件ProductForm,一个产品组件 ModalTrigger modal={PopupForm form={ProductForm ref="pform" data={this.props.prod_data} /}/} Button bsStyl

我正在使用react-bootstrap来启动模态表单.

为此,我在我调用的产品组件中创建了一个模态组件PopupForm,一个表单组件ProductForm,一个产品组件

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

在这个onClick Editer上,我想调用ProductForm组件的方法提交,ProductForm组件以prop形式发送到PopupForm,我显示它像{this.props.form},但我不能调用方法{this.props.form.submit()}
实际上我想使用模态按钮来触发ProductForm方法,如果不可能我会在ProductForm中使用提交按钮.

这是我的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>
      );
    }
  });

提前致谢.

解决方法

如果您有嵌套组件,您可以像这样调用另一个函数：

儿童：

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

家长：

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

你的情况也一样.你的代码中不是很清楚,所以我无法帮助你自己编写代码.如果你弄乱这个,请以分层方式发布你的整个代码,这样它会更具可读性.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!