如何在Redux表單中為同一父級的多個表單子級組件管理多個#onSubmits？

Question

在Redux-Form中，似乎您將onSubmit作為道具傳遞給表單組件，然后該表單組件在其form標記上將具有onSubmit={handleSubmit}屬性。 這很有意義，因為Redux-Form隨后將收集所有表單數據，並將其作為一個對象參數傳遞給onSubmit函數。 但是，當您具有同一父組件的多個表單組件子項時，會發生什么？ 即使他們的表單子項需要對提交的信息執行不同的操作，您也只能使用一個onSubmit函數來傳遞給這兩個表單子項。 唯一的解決方案是擁有多個表單的多個父對象，以便您可以傳遞不同的onSubmit嗎？ 對我來說，這似乎不是很干。

Answer 1

您可以在此處使用reactjs的組合概念。

您需要的是：-

保留一個通用表單，將其稱為CommonForm.js。 該表格將附加到您的redux表格中。 因此，您的所有表單通用功能（可能是打開表單，關閉表單）都將在此處實現。

PS：此處不應該存在Field組件。

現在，假設您要渲染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 } />