如何在Redux表单中为同一父窗体的多个窗体子组件管理多个# onsubmit ?

Question

在Redux-Form中，似乎您将onSubmit作为道具传递给表单组件，然后表单组件将在其表单标签上具有onSubmit={handleSubmit}属性。这是有意义的，因为Redux-Form将收集所有的表单数据，并将其作为一个单一对象参数传递给您的onSubmit函数。但是，如果同一父组件有多个表单组件子组件，会发生什么呢?您只能将一个onSubmit函数传递给两个表单子窗体，即使它们需要对提交的信息执行不同的操作。是唯一的解决方案，有多个父多个形式只是为了让你可以在不同的onSubmit传递?

Answer 1

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

你需要做的是:-

保持一个通用的表单，我们叫它CommonForm.js。这个表格会附在你的redux表格上。因此，所有表单常用功能(可能是打开表单，关闭表单)都将在这里实现。

p。S:此处不能有Field组件

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

在FirstForm.js中，你渲染你的字段，并将你渲染的字段作为道具传递给你的CommonForm(我在这里使用composition)。

检查以下代码:-

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

动态形式:-

理想情况下，上面应该解决你的查询，但有一些更有趣的事情。如果你仔细检查了通用格式的最后一行代码，你可以看到我传递了以下参数:-

{fields: ["text"]}

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

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

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

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