Redux-Form V6 ile Özel Düşüş Alanı Bileşeni Nasıl Oluşturulur?

Question

Form-heavy olacak bir uygulama var ve olabildiğince az bağımlılık kullanırken, mümkün olduğunca fazla kontrol istiyorum. Bunu yapmak için, redux-form v6'nın özel Saha bileşeni API'sinden faydalanmak ve isteğime göre düşebileceğim bir dizi özel bileşen yapmak istiyorum. Bu bileşenlerden biri bir açılır menüdür.

Sorun, tamam açılsa bile özel açılan bileşenin duruma bağlı olmamasıdır. docs yılında

, örnekler gerçekleştirmek böyle: Ben bir bileşeni damla, ve sahne içine veri dizisini besleyebilir bir tak-play yöntemi arıyorum

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

Ben Redux DevTools'un, açılan etkileşimde bulunurken alanın değeri doldurur asla işaretlediğinizde:

ben hem alanları için değer aldı, fakat sadece 'effDate' bir değer doldurur, 'dropDownSelect', değeri olmayan kayıtlı bir alan olarak kalıyor.

Düzenleme:

Örneğin kapalı göre, bu konuda gitmek için yol tahmin gibidir:

Bunu uygulamak eğer ideal olacaktır ama bu, şimdilik çalışır

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> 

Tamamen ayrı bir bileşen olarak (ilk soruda belirtildiği gibi), böylece alanın diğer alanlara bağlı olması durumunda yaşam döngüsü kancalarından faydalanabiliyorum.

Özel Bileşen:

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

Alanı:

Answer 1

Ben formu redüktör bağlamak için 'giriş' sahne içerecek şekilde gerekli, damla aşağı seçme kolları ayrı özel bileşen yapmak için

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