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

Question

我有一个这样的表单组件：

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 指向连接器。据我了解，连接器是 reducer 更新 props 的渠道，但是这样做不会触发对 submit 的调用。

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

我可以 React.findDOMNode(this.refs.form).submit() 但这并不能回答从外部调用组件方法的实际问题。

我做错了什么？

Answer 1

可以获取包装好的组件实例，如有需要，with getWrappedInstance:

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

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

How to trigger a form submit in child component with Redux?

javascript

reactjs

redux