रेडक्स में किसी अन्य फ़ील्ड के आधार पर एक फ़ील्ड मान्य करें फॉर्म

Question

मैं redux-form का उपयोग कर रहा हूं, और मेरे घटक के पास FieldArray है। FieldArray घटक में से एक स्क्रीनशॉट में दिखाए गए टेबल उत्पन्न करता है। यहां प्रत्येक पंक्ति Field घटक है जिसमें चेकबॉक्स शामिल है। मैं जो हासिल करना चाहता हूं वह है, यदि उस पंक्ति पर checkbox घटक चेक किया गया है, तो केवल price फ़ील्ड आवश्यक होनी चाहिए।

मैं validate.js का उपयोग कर docs में वर्णित के रूप से इस समस्या के समाधान की कोशिश की, लेकिन जब से, इस घटक के रूप में संरचना है:

<FirstComponent> 
<FieldArray 
    component={SecondComponent} 
    name="options" 
    fruits={fruitsList} 
/> 
</FirstComponent> 

मेरी SecondComponent मैं fruitsList से अधिक पुनरावृत्ति और कर रहा हूँ में अगर लंबाई 1 से अधिक है, तो है मैं ThirdComponent प्रस्तुत करता हूं। यह घटक स्क्रीनशॉट में शो के रूप में फल सूचियों को उत्पन्न करने के लिए ज़िम्मेदार है। घोंसले की कुछ डिग्री होने पर, जब मैं मानों के साथ मान्य करता हूं, तो इसमें बहुत अधिक प्रदर्शन अंतराल होता है, जब तक यह ThirdComponent प्रस्तुत नहीं करता है तब तक मेरी स्क्रीन फ्रीज होती है। प्रत्येक घटक में Fields का बिट होता है, इसलिए उन्हें आसानी से मर्ज नहीं किया जा सकता है। सुरुचिपूर्ण तरीके से इसे हल करने का कोई आसान तरीका सहायक होगा। सत्यापित करने का तर्क इस प्रकार है:

props.fruitsList.map((fruit, index) => { 
     const isChecked = values.getIn(['fruit', index, 'checked']) 
     if (isChecked) { 
     const price = values.getIn(['fruit', index, 'price']) 
     if (price === undefined || price.length === 0) { 
      errors.fruits[index] = { price: l('FORM->REQUIRED_FIELD') } 
     } 

     } 
     return errors 
    }) 

Answer 1

तुल्यकालिक सत्यापन फंक्शन फॉर्म में सभी मूल्यों दिया जाता है। इसलिए, मान लें कि आपका चेकबॉक्स एक फॉर्म वैल्यू है, आपके पास आपकी सारी जानकारी है।

function validate(values) { 
    const errors = {} 
    errors.fruits = values.fruits.map(fruit => { 
    const fruitErrors = {} 
    if (fruit.checked) { // only do fruit validation if it's checked 
     if (!fruit.price) { 
     fruitErrors.price = 'Required' // Bad user!! 
     } 
    } 
    return fruitErrors 
    }) 
    return errors 
} 

... 

MyGroceryForm = reduxForm({ 
    form: 'groceries', 
    validate 
})(MyGroceryForm)