How to call form submission to child component using Redux?

Question

I have a form component as follows:

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 component 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 the component rendering, I have <Form id="paymentform" ref="form" action="/self"> .

I can not do this.refs.form.submit(); because this.refs.form points to a Connector. As I understand it, connectors are funnels for gearboxes for updating props, however this cannot cause a submit call.

A use case basically consists in transferring the form to another action that will start using the form component, for example, XHR checks and requests.

I can do React.findDOMNode(this.refs.form).submit() , but this does not answer the actual question about getting the component method from the outside.

What am I doing wrong here?

Answer 1

You can get an instance of a wrapped component, if necessary, with getWrappedInstance :

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