रेडक्स-फॉर्म वी 6 के साथ कस्टम ड्रॉपडाउन फील्ड घटक कैसे बनाएं?

Question

मेरे पास एक ऐप है जो फॉर्म-भारी होगा, और जितना संभव हो उतना नियंत्रण जितना संभव हो उतना नियंत्रण कर सकता हूं, जितना मैं कर सकता हूं। ऐसा करने के लिए, मैं रेडक्स-फॉर्म v6 के कस्टम फील्ड घटक एपीआई का लाभ लेना चाहता हूं और कस्टम घटकों का एक समूह बनाना चाहता हूं जिसे मैं इच्छानुसार छोड़ सकता हूं। इन घटकों में से एक ड्रॉप डाउन चयन है।

समस्या यह है कि कस्टम ड्रॉप डाउन घटक राज्य से कनेक्ट नहीं होता है, भले ही यह ठीक हो।

डॉक्स में, उदाहरण पूरा इस तरह:

<Field name="favoriteColor" component="select"> 
    <option></option> 
    <option value="#ff0000">Red</option> 
    <option value="#00ff00">Green</option> 
    <option value="#0000ff">Blue</option> 
</Field> 

मैं एक प्लग-एंड-प्ले दृष्टिकोण जहां मैं एक घटक में ड्रॉप कर सकते हैं, और रंगमंच की सामग्री में डेटा की एक सरणी को खिलाने के लिए देख रहा हूँ :

Form.js:

 <div className="form-group"> 
     <label htmlFor="dropDownSelect">Select an Option</label> 
     <Field 
      name="dropDownSelect" 
      component={DropDownSelect} 
      people={people} 
      className="form-control" 
     > 
     </Field> 
     </div> 

DropDownSelect.js:

import React from 'react'; 

import styles from './styles.css'; 

class DropDownSelect extends React.Component { // eslint-disable-line react/prefer-stateless-function 
    renderSelectOptions = (person) => { 
    return (
     <option key={person} value={person}>{person}</option> 
    ); 
    } 

    render() { 
    return (
     <select> 
     {this.props.people.map(this.renderSelectOptions)} 
     </select> 
    ); 
    } 
} 


export default DropDownSelect; 

जब मैं Redux DevTools, फ़ील्ड का मान कभी नहीं भरता है जब लटकती के साथ बातचीत की जाँच करें:

मैं दोनों क्षेत्रों के लिए एक मूल्य उठाया है, लेकिन केवल 'effDate' एक मूल्य भरता है, जबकि 'ड्रॉपडाउन चयन' किसी भी मूल्य के साथ एक पंजीकृत फ़ील्ड के रूप में बनी हुई है।

संपादित करें:

उदाहरण बंद आधार पर, मैं इस बारे में जाने का रास्ता लगता है की तरह है:

function DropDownSelect(person) { 
    return (
    <option key={person} value={person}>{person}</option> 
); 
} 

export default DropDownSelect; 


     <div className="form-group"> 
     <label htmlFor="dropDownSelect">Select an Option</label> 
     <Field 
      name="dropDownSelect" 
      component="select" 
      // component={DropDownSelect} 
      // people={people} 
      className="form-control" 
     > 
      {people.map(DropDownSelect)} 
     </Field> 

यह अब के लिए काम करता है, हालांकि यह है कि अगर मैं यह लागू हो सकता है आदर्श होगा एक पूरी तरह से अलग घटक (जैसा प्रारंभिक प्रश्न में उल्लिखित है) के रूप में, इसलिए यदि क्षेत्र अन्य क्षेत्रों पर निर्भर करेगा तो मैं जीवन चक्र हुक का लाभ उठा सकता हूं।

Answer 1

कि ड्रॉप डाउन चयन संभालती अलग कस्टम घटक बनाने के लिए, मैं इसे प्रपत्र कम करने के लिए कनेक्ट करने के लिए 'इनपुट' रंगमंच की सामग्री को शामिल करने की जरूरत:

कस्टम घटक:

/** 
* 
* DropDownSelect 
* 
*/ 

import React from 'react'; 

import styles from './styles.css'; 

class DropDownSelect extends React.Component { // eslint-disable-line react/prefer-stateless-function 

    renderSelectOptions = (person) => (
    <option key={person} value={person}>{person}</option> 
) 

    render() { 
    const { input, label } = this.props; 
    return (
     <div> 
     {/* <label htmlFor={label}>{label}</label> */} 
     <select {...input}> 
      <option value="">Select</option> 
      {this.props.people.map(this.renderSelectOptions)} 
     </select> 
     </div> 
    ); 
    } 
} 

// function DropDownSelect(person) { 
// return (
//  <option key={person} value={person}>{person}</option> 
// ); 
// } 

DropDownSelect.propTypes = { 
    people: React.PropTypes.array, 
    input: React.PropTypes.object, 
    label: React.PropTypes.string, 
}; 

export default DropDownSelect; 

फील्ड:

 <div className="form-group"> 
     <label htmlFor="dropDownSelect">Select an Option</label> 
     <Field 
      name="dropDownSelect" 
      // component="select" 
      label="dropDownSelect" 
      component={DropDownSelect} 
      people={people} 
      className="form-control" 
     > 
      {/* {people.map(DropDownSelect)} */} 
     </Field> 
     </div>