Apprendre à Créer des Déroulante Champ de Composant avec Redux-Forme V6?

J'ai une application qui sera lourd, et j'aimerais autant de contrôle que possible, tout en utilisant aussi peu de dépendances que je peux. Pour ce faire, j'aimerais profiter de redux-forme v6 du Champ personnalisé de l'API du composant et faire un tas de composants personnalisés que je peux laisser dans. L'un de ces composants est une liste déroulante, sélectionnez.

Le problème c'est le composant de liste déroulante ne se connecte pas à l'état, même si elle rend OK.

Dans les docs, les exemples accomplir ce genre:

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

Je suis à la recherche d'un plug-and-play où je peux déposer dans un composant, et d'alimenter les accessoires d'un tableau de données:

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;

Quand je vérifie Redux DevTools, la valeur du champ ne jamais se remplit lorsque l'interaction avec la liste déroulante:

J'ai choisi une valeur pour les deux champs, mais seulement des "effDate' remplit une valeur, tandis que les "dropDownSelect" reste inscrit terrain avec aucune valeur.

Edit:

Basé sur l'exemple, je suppose que la façon de le faire c'est comme:

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>

Cela fonctionne pour l'instant, même si ce serait mieux si je pouvais mettre en œuvre ce que un tout autre composant (comme indiqué dans la question initiale), donc je peux profiter de cycle de vie des crochets dans le cas où le champ dépendra d'autres domaines.

OriginalL'auteur Kyle Truong | 2016-10-16