如何使用Redux-Form V6創建自定義下拉字段組件？

Question

我有一個應用程序，將形式沉重，我想盡可能多的控制，儘可能少的依賴關係，盡我所能。爲此，我想利用redux-form v6的自定義Field組件API並製作一大堆我可以隨意放入的自定義組件。其中一個組件是一個下拉選擇。

問題是自定義下拉組件未連接到狀態，即使它呈現「確定」。

在文檔中，實施例做到這一點，如：

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

當我檢查終極版DevTools，與下拉交互時，該字段的值從未填充：

我挑了價值這兩個領域，但只有「effDate」填充值，而'dropDownSelect'仍然是一個沒有值的註冊字段。

編輯：

基於關閉的例子，我猜去了解這一點的方法是這樣的：

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>