पृष्ठ पर एक ही redux-form कई बार एम्बेड करने के लिए कैसे?

Question

मुझे एक पृष्ठ पर कई रूपों को एम्बेड करने का प्रयास करने में कोई समस्या है। मैंने देखा कि configForm पृष्ठ पर कई रूपों के साथ भी एक बार निष्पादित करता है, इसलिए मैं गतिशील रूप से विभिन्न रूपों के नाम उत्पन्न नहीं कर सकता।

Screenshot showing multiple text fields bound together।

function configForm(){ 
    const uuid = UUID.generate(); 

    const config = { 
    form:`AddCardForm_${uuid}`, 
    fields:['text'], 
    validate:validate 
    } 

    return config; 
} 

export default reduxForm(configForm(), mapStateToProps, {togglePanelEditMode, addCardToPanel})(CardFormContainer); 

मैं फॉर्म कैसे जोड़ सकता हूं ताकि वे एक-दूसरे से स्वतंत्र हो सकें?

Answer 1

पृष्ठ पर एक ही फॉर्म को कई बार एम्बेड करने के दो तरीके हैं।

1. formKey (Redux फार्म 5) का उपयोग करते हुए

formKey यह कर जब redux-form@5 (या नीचे) का उपयोग कर की आधिकारिक तरीका है। आप प्रपत्र पहचान करने के लिए माता पिता से कुंजी पारित करने के लिए है:

panels.map(panel => 
    <PanelForm key={panel.uuid} formKey={panel.uuid} initialValues={panel} /> 
           ^^^^^^^ 
         declare the form key 
) 

आपका प्रपत्र परिभाषा होगा:

reduxForm({form: "AddCardForm", fields: ["text"], validate}) 

हालांकि इस पद्धति redux-form@6 से हटा दिया गया।

2. एक अनूठा form नाम (Redux फार्म 5 और ऊपर) का उपयोग करते हुए

निम्नलिखित पैटर्न Redux फार्म 6. के बाद से रूपों की पहचान करने की सिफारिश की तरीका है यह पिछले संस्करणों के साथ पूरी तरह से संगत है।

panels.map(panel => 
    <PanelForm key={panel.uuid} form={`AddCardForm_${panel.uuid}`} initialValues={panel} /> 
           ^^^^ 
        declare the form identifier 
) 

आपका प्रपत्र परिभाषा होगा:

reduxForm({fields: ["text"], validate}) 
// No `form` config parameter here!