I have a Form ponent like this:

var React = require('react'),
  ReactRedux = require('react-redux');


var Form = React.createClass({
  render: function(){
    return (
      <form onsubmit={this.onsubmit} action={this.props.action}>
      {this.props.children}
      </form>
    );
  },
  // Method for parent ponent to call
  submit: function() {
    // do submission and return Promise so caller can take actions
  },
  onsubmit: function(e) {
    // validation, make requests, etc
  }
});

function mapStateToProps(state) {
  return state;
}

module.exports = ReactRedux.connect(mapStateToProps)(Form);

Inside my render of a ponent I have <Form id="paymentform" ref="form" action="/self">.

I can't do this.refs.form.submit(); because this.refs.form points to the Connector. As I understand it, Connectors are the funnels for reducers to update props, however doing that can't trigger a call to submit.

The use case is basically to have the form submit from another action, which will kick off what the Form ponent is supposed to do such as validation and XHR requests.

I can do React.findDOMNode(this.refs.form).submit() but that doesn't answer the actual question of hitting a ponent method from outside.

What am I doing wrong here?

I have a Form ponent like this:

var React = require('react'),
  ReactRedux = require('react-redux');


var Form = React.createClass({
  render: function(){
    return (
      <form onsubmit={this.onsubmit} action={this.props.action}>
      {this.props.children}
      </form>
    );
  },
  // Method for parent ponent to call
  submit: function() {
    // do submission and return Promise so caller can take actions
  },
  onsubmit: function(e) {
    // validation, make requests, etc
  }
});

function mapStateToProps(state) {
  return state;
}

module.exports = ReactRedux.connect(mapStateToProps)(Form);

Inside my render of a ponent I have <Form id="paymentform" ref="form" action="/self">.

I can't do this.refs.form.submit(); because this.refs.form points to the Connector. As I understand it, Connectors are the funnels for reducers to update props, however doing that can't trigger a call to submit.

The use case is basically to have the form submit from another action, which will kick off what the Form ponent is supposed to do such as validation and XHR requests.

I can do React.findDOMNode(this.refs.form).submit() but that doesn't answer the actual question of hitting a ponent method from outside.

What am I doing wrong here?

• javascript
• reactjs
• redux

1 Answer 1

You can get the wrapped ponent instance, if necessary, with getWrappedInstance:

this.refs.form.getWrappedInstance().submit()