Jak utworzyć niestandardowy komponent pola rozwijanego z Redux-Form V6?

Question

Mam aplikację, która będzie formą ciężką, i chciałbym jak najwięcej kontroli, przy jednoczesnym użyciu jak najmniejszej liczby zależności. Aby to zrobić, chciałbym skorzystać z niestandardowego komponentu API field komponentu redux-form v6 i stworzyć kilka niestandardowych komponentów, do których mogę w każdej chwili dodać. Jednym z tych komponentów jest rozwijany wybór.

Problem polega na tym, że niestandardowy komponent rozwijany nie łączy się ze stanem, mimo że renderuje się poprawnie.

W docs, przykłady tego dokonać jak:

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

szukam podejściu plug-and-play, gdzie mogę wpaść komponentu i podawany do rekwizytów tablicę danych :

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; 

Kiedy sprawdzić Redux DevTools, wartość tej dziedzinie nigdy nie zapełnia podczas interakcji z listy rozwijanej:

wybrałem wartość dla obu polach, ale tylko „effDate” zapełnia wartości, natomiast "dropDownSelect" pozostaje jako zarejestrowane pole bez wartości.

Edit:

Opierając się na przykład, myślę o drogę, o to jak:

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> 

Działa to teraz, chociaż byłoby idealnie, gdyby mógł wdrożyć tę jako całkowicie odrębny komponent (jak opisano w początkowym pytaniu), dzięki czemu mogę skorzystać z haków cyklu życia w przypadku, gdy pole będzie zależeć od innych pól.

Answer 1

Aby oddzielny składnik niestandardowy, który obsługuje rozwijanego menu wybierz, musiałem to rekwizyty 'input' podłączyć go do reduktora forma:

Niestandardowy komponent:

/** 
* 
* 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; 

Pole:

 <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>