Как использовать тип ввода select с редукцией?

Я искал и много пробовал использовать тип ввода select с моей реакционной формой, используя библиотеку редукционной формы.

Все работает, все остальные типы ввода в порядке, но не выбираются для следующих действий: инициализировать, извлекать переданное значение и т.д.

Я попытался использовать опору модели с помощью "select" и моей собственной функцией для ее рендеринга. Когда я использую выбранную версию для модели, мне удается получить параметры поля combobox, но мне не удается установить значение и получить его при отправке. С моей собственной функцией мне даже не удается установить параметры в список...

Вот мой код:

// FormComponent file
const { handleSubmit } = this.props;
...
<form onSubmit={handleSubmit(this.props.onSubmitProfileUpdate)}>
    <Field name='ranking' className='input-row form-group form-control' component={renderSelectField}>
                        {tennisRankings.map(ranking =>
                          <option value={ranking} key={ranking}>{ranking}</option>
                        )}
                      </Field>
...
ProfileForm.propTypes = {
  user: React.PropTypes.object,
  fields: React.PropTypes.shape({
    firstname: React.PropTypes.string,
    lastname: React.PropTypes.string,
    ranking: React.PropTypes.string,
    email: React.PropTypes.string,
    telephone: React.PropTypes.string,
    city: React.PropTypes.string
  }),
  errorMessage: React.PropTypes.string,
  confirmationMessage: React.PropTypes.string,
  onSubmitProfileUpdate: React.PropTypes.func.isRequired,
  handleSubmit: propTypes.handleSubmit,
  initialize: propTypes.initialize
};

export default reduxForm({
  form: 'profile',
  validate: validateProfileForm
})(ProfileForm);

Моя функция для отображения поля:

// Functions shared
export const renderSelectField = (field) => {
  var styles = {};
  var containerStyle = getInputStylesContainer();

      if (field.input.value || field.meta.touched) {
        if (!field.meta.error) {
          styles = getInputStylesSuccess();
          containerStyle = classNames(containerStyle, {'has-success': true});
        } else {
          styles = getInputStylesError();
          containerStyle = classNames(containerStyle, {'has-error': true});
        }
      }

      return (<div className={containerStyle}>
        {displayInputLabel(styles.idInput, field.label)}
        <select {...field.input} className='form-control' id={styles.idInput} value={field.input.value} type={field.type} placeholder={field.label} aria-describedby={styles.ariaDescribedBy} />
        <span className={styles.glyphicon} aria-hidden='true' />
        {field.meta.touched && field.meta.error &&
        displayErrorMessage(field.meta.error)}
      </div>);
    };

У вас есть ключ к выполнению этого простого действия? Будьте снисходительны Я новичок:)

Большое спасибо за вашу помощь:)

ИЗМЕНИТЬ:

Вот как я инициализирую свои значения формы:

// FormComponent file
handleInitialize () {
    // TODO: Manage properly user not available case (redux form reason ?)
    if (this.props.user.firstname === undefined) return;
    const initData = {
      'firstname': this.props.user.firstname.toString(),
      'lastname': this.props.user.lastname.toString(),
      'city': this.props.user.city === undefined ? '' : this.props.user.city.toString(),
      'email': this.props.user.email.toString(),
      'ranking': this.props.user.ranking.toString(),
      'telephone': this.props.user.telephone === undefined ? '' : this.props.user.telephone.toString()
    };
    console.log('Ranking', this.props.user.ranking);
    this.props.initialize(initData);
  }

  componentDidMount () {
    this.handleInitialize();
  }

....

export default reduxForm({
  form: 'profile',
  validate: validateProfileForm
})(ProfileForm);

Ответ 1

Здесь пример простого поля выбора из официальных документов :

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

В вашей реализации не отображается option, поэтому select не работает.

Sidenote Чтобы передать начальные значения, вы должны добавить свойство initialValues к вашей конфигурации reduxForm вместо добавления атрибута value в поле. Пример ниже:

export default reduxForm({
  form: 'profile',
  validate: validateProfileForm,
  initialValues: { ... }
})(ProfileForm);

Ответ 2

выберите пример рейтинга: избыточная форма

пример того, как обрабатывать выделение в избыточной форме

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
/*------- connect react with redux --------*/
import { connect } from 'react-redux';
/*------- action which all data to data base --------*/
import { addProduct } from '../actions'
/*------- redux form --------*/
import { Field, reduxForm } from 'redux-form';

class Form extends Component {

    //PRISTINE / DIRTY // TOUCHED / ERROR : events in redux-form 

  

    /*------- renderSelectField  --------*/

  
    renderSelectField(field){
        const className = 'form-input ${field.meta.touched && field.meta.error ? 'has-error':''}';
        return(
            <div className={className}>
                <label>{field.myLabel}</label>

                
               <select  {...field.input}  >
                    {field.children}
               </select>

                 <div className="error">
                    {field.meta.touched ? field.meta.error:''}
                </div>
            </div>
        )
    }
/*------- onSubmit() : runs on submit  --------*/
    onSubmit(values){

       // const error = this.validate(values);
       // console.log(error)
        console.log(values)
        this.props.dispatch(addProduct({
            values
         }))
    }


    render(){
        return(
            <div className="Form">
                <div className="top">
                    <h3>Add a Message</h3>
                    <Link to="/">Back</Link>
                </div>
                <form onSubmit={this.props.handleSubmit((event)=>this.onSubmit(event))}>

                    <Field
                        myLabel="Select Rating"                    
                        name="rating"
                        component={this.renderSelectField}>
                        <option></option>
                        <option value='1'>1</option>
                        <option value='2'>2</option>
                        <option value='3'>3</option>
                        <option value='4'>4</option>
                        <option value='5'>5</option>
                    </Field>
 

                    <button type="submit">Submit</button>

                </form>
            </div>
        )
    }
}
/*------- validate() : validates our form  --------*/


function validate(values){
    const errors = {};

   

    if(!values.rating){
        errors.rating = "The rating is empty"
    }


    return errors;
}
    /*------- it returns messages when action is called and state going to change  --------*/

function mapStateToProps(state){

    return {
        product: state.data
    }
}

    /*------- reduxForm : connects redux-form with react form   --------*/

export default reduxForm({
    validate,
    form:'AddProduct',
})(
    connect(mapStateToProps,{addProduct})(Form)
)