forms - example - react form

Método de llamada React-bootstrap de componente externo

Question

Estoy usando reaccionar-bootstrap para lanzar un formulario modal.

Para hacer eso creé un componente modal PopupForm , un componente del formulario ProductForm , un componente del producto, en el componente del producto que llamo

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

En este onClick Editer, me gustaría llamar al método de submit del componente ProductForm , el componente ProductForm se envía a PopupForm en el formulario prop, lo visualizo así {this.props.form} , pero no puedo llamar al método {this.props.form.submit()} En realidad, me gustaría utilizar el botón modal para activar el método ProductForm si no es posible. Utilizaré un botón de enviar dentro de ProductForm.

Aquí está mi 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>
      );
    }
  });

Gracias por adelantado.

Answer 1

si tiene componentes anidados, puede llamar a la función del otro de la siguiente manera:

Niño:

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

Padre:

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

Lo mismo pasa en tu caso. No estaba muy claro en tu código, así que no pude ayudarte con el código en sí mismo. Si te pones complicado con esto, publica tu código completo de forma jerárquica para que sea más legible.