如何在 react-forms 中处理两个不同的 onSubmit 函数？

Question

我有一个祖父容器，其中有子组件，其中还有另外两个子组件。

这两个子组件是 redux 表单。

现在我想通过表单验证处理这两个表单提交事件并执行不同的任务。如何使用 redux-forms 实现？

我尝试使用自定义道具，但 不 激活 表单验证。

这是我的代码：

父容器：

const props = {
 onSubmit: this.confirmChangeBillingInformation,
}
return <CompanyDetails {...props} />;

子组件：

const CompanyDetails = (props) => {
 <ChangePaymentInformation {...props} />

 <ChangeCompanyPricing {...props} />
}

grand child forms：有两种这样的形式

const ChangeCompanyPricing = ({ classes, companyPricing, showChangePricingModal, actions, handleSubmit }) => {
 return (
 ...
 <form onSubmit={handleSubmit}>
  <Button color="primary" type="submit" variant="raised">
    Save
  </Button>
 ...
 )
}

Answer 1

在父容器中将变量的名称更改为handleSubmit，因为在子组件中，您在ChangeCompanyPricing 组件中获得handleSubmit 道具。它根本没有定义。所以更改它。在confirmChangeBillingInformation 中进行验证。我假设所有数据验证所需的将可用于父组件

const props = {
 handleSubmit: this.confirmChangeBillingInformation,
}
return <CompanyDetails {...props} />;