redux फार्म का चयन क्षेत्र

Question

के लिए v6 शो सत्यापन त्रुटि redux फार्म की v6 में हम निम्नलिखित

हम कस्टम इस

const renderField = ({ input, label, type, meta: { touched, error } }) => (
    <div> 
    <label>{label}</label> 
    <div> 
     <input {...input} placeholder={label} type={type}/> 
     {touched && error && <span>{error}</span>} 
    </div> 
    </div> 
) 

और में की तरह renderField बना सकते हैं की तरह सामान्य इनपुट फ़ील्ड के लिए त्रुटियाँ दिखा सकते हैं प्रपत्र, बस हम उपयोग कर सकते हैं कि कस्टम

<Field name="username" type="text" component={renderField} label="Username"/> 

renderField अब मुझे पता है, हम चयन क्षेत्र के लिए यह एक ही कैसे कर सकते की जरूरत है, और हम कैसे इस कस्टम renderFields, एक करने के लिए लटकती विकल्पों पास करना चाहिए चयन के लिए कस्टम रेंडरफिल्ल्ड बनाने के लिए विचार?

Answer 1

आप कुछ कोड दोहराव कोई आपत्ति नहीं है, तो आप इसे इस तरह कर सकता है:

<Field name="username" component={renderSelectField} label="Username"> 
    { mySelectOptions.map(option => <option value={option.value}>{option.text}</option>) } 
</Field> 

आपको लगता है कि एक करने के लिए विकल्पों गुजर देख सकते हैं:

const renderSelectField = ({ input, label, type, meta: { touched, error }, children }) => (
    <div> 
    <label>{label}</label> 
    <div> 
     <select {...input}> 
     {children} 
     </select> 
     {touched && error && <span>{error}</span>} 
    </div> 
    </div> 
) 

रूप में सेवन चयन props.children के माध्यम से किया जाता है, ठीक उसी तरह जब आप घटक component="select" के साथ उपयोग करेंगे।

यदि आप डुप्लिकेशन नहीं चाहते हैं, तो आप मूल renderField को थोड़ा अधिक स्मार्ट बनाने की कोशिश कर सकते हैं। उदाहरण के लिए, आप देख सकते हैं कि children में विकल्प-टैग हैं, और यदि ऐसा है, तो input के बजाय <select> प्रस्तुत करें।