如何使用Redux触发子组件中的表单提交？

Question

我有一个这样的Form组件:

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

在我的组件渲染中,我有<Form id="paymentform" ref="form" action="/self">.

我不能这样做,this.refs.form.submit();因为this.refs.form指向连接器.据我了解,连接器是减速器更新道具的漏斗,但这样做不能触发调用submit.

用例基本上是从另一个动作提交表单,这将启动Form组件应该执行的操作,例如验证和XHR请求.

我能做到,React.findDOMNode(this.refs.form).submit()但这并不能回答从外部命中组件方法的实际问题.

我在这做错了什么？

Answer 1

你可以得到裹组件实例,如果必要的话,有getWrappedInstance:

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