5

モーダルフォームを起動するために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>
        )
    }
});

このEditer上で、コンポーネントonClickのメソッドを呼び出したいのですが、propフォームにコンポーネントが送信され、このように表示するのですが、メソッドが呼び出せません 本当はモーダルボタンを使ってやりたいのですそれが不可能な場合は、ProductForm メソッドをトリガーします。ProductForm 内で送信ボタンを使用します。submitProductFormProductFormPopupForm{this.props.form}{this.props.form.submit()}

これが私のもの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>
      );
    }
  });

前もって感謝します。

4

1 に答える 1

2

ネストされたコンポーネントがある場合は、次のように他のコンポーネントの関数を呼び出すことができます:

子：

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

あなたの場合も同じです。あなたのコードではあまり明確ではなかったので、コード自体を手伝うことができませんでした。これが面倒な場合は、コード全体を階層的に投稿して、読みやすくしてください。

于 2015-06-22T19:43:22.533 に答える