javascript - How to trigger a form submit in child component with Redux? - Stack Overflow

admin管理员组

文章数量:1432607

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

Share Improve this question Follow edited Oct 7, 2015 at 19:52 Dave Stein asked Oct 7, 2015 at 19:01 Dave SteinDave Stein 9,3921616 gold badges6262 silver badges121121 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

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

本文标签： javascriptHow to trigger a form submit in child component with ReduxStack Overflow