How to use select input type with reduction?

Question

I searched and tried a lot to use the select input type with my reaction form using the reduction form library.

Everything works, all other input types are in order, but are not selected for the following actions: initialize, retrieve the passed value, etc.

I tried to use the model support with "select" and my own function to render it. When I use the selected version for the model, I can get the parameters of the combobox field, but I can not set the value and get it when sending. With my own function, I can't even set the parameters to a list ...

Here is my code:

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

My function to display the field:

// 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>);
    };

Do you have a key to this simple action? Be lenient I'm a newbie :)

:)

:

:

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

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

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

Hide result