如何在 Redux Form 中为同一父级的多个表单子组件管理多个 #onSubmits？

Question

在 Redux-Form 中，您似乎将 onSubmit 作为 prop 传递给表单组件，然后表单组件的表单标签上会有一个 onSubmit={handleSubmit} 属性。这是有道理的，因为 Redux-Form 将收集所有表单数据并将其作为单个对象参数传递给您的 onSubmit 函数。但是，当您有同一个父组件的多个表单组件子组件时会发生什么？您只能将一个 onSubmit 函数传递给您的两个表单子项，即使他们需要对提交的信息执行不同的操作。唯一的解决方案是为多个表单设置多个父级，以便您可以传入不同的onSubmit？对我来说，这似乎不是很干燥。

Answer 1

你可以在这里使用reactjs的composition概念。

你需要做的是：-

保持一个通用的表单，我们称之为 CommonForm.js。此表单将附加到您的 redux 表单。所以你所有的表单常用功能（可能是打开表单，关闭表单）都将在这里实现。

P.S：此处不应出现任何字段组件。

现在，假设您要渲染 5 种不同的表单。让我们以第一种形式为例。我将文件命名为 FirstForm.js。

在 FirstForm.js 中，您渲染您的字段并将您渲染的字段作为道具传递给您的 CommonForm（我在这里使用组合）。

检查以下代码：-

表格1

     class Form1 extends Component {
       render(){
        const renderedFields = this.renderFormFields()
        return(
           <CommonForm {...this.props} renderedFields = {renderedFields } />
        )
      } 
     }

通用格式

class CommonForm extends Component {

  componentDidMount(){
    const { data,initialize} = this.props
    if(data){
      initialize(data)
    }
  }

  render(){
    const { renderedFormFieldss }  = this.props
    return(
      <div className='form-container'>
        <form onSubmit={this.instrumentSplitCreateOrUpdate()}>
          {renderedFormFields}
        </form>
      </div>
    )
  }
}

CommonForm = reduxForm({fields: ["text"], validate : validateInputField})(CommonForm)

export default CommonForm

这样你就可以使用相同的基础组件连接到 redux 表单了。

动态形式：-

理想情况下，上面应该可以解决您的查询，但还有一些更有趣的东西。如果您在常见形式的最后一行中正确地查看了代码，您可以看到我将以下内容作为参数传递：-

{fields: ["text"]}

因此，在此您可以创建具有变量名称的表单。假设您有多个组件使用的相同表单，并且您希望呈现相同的表单但名称不同。为此，您可以尝试以下操作：-

<CommonForm {...this.props} renderedFields = {renderedFields } />

从说 Form1 调用 CommonForm 时，传递一个名为 form 的道具，其中包含您要创建表单的变量名称。你可以像下面这样：-

<CommonForm form='//some key' {...this.props} renderedFields = {renderedFields } />