Question

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

Answer 1

您可以在此处使用reactjs的composition概念。

您需要的是： -

保持一个共同的形式，我们称之为CommonForm.js。此表单将附加到您的redux表单。因此，所有形式的常用功能（可能是开放形式，结束形式）都将在此处实施。

P.S：此处不应包含Field组件。

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

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

检查以下代码： -

表单1

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

<强> CommonForm

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表单。

DYNAMIC FORMS： -

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

{fields: ["text"]}

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

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

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

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

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

1 个答案: