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

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

本文关键字：组件 表单提交 何使用 Redux      更新时间：2023-09-26

我有一个这样的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()，但这并不能回答从外部击中组件方法的实际问题。

我在这里做错了什么?

如果需要，您可以使用getWrappedInstance:

获取包装组件实例。
this.refs.form.getWrappedInstance().submit()
相关文章：