How to handle submitted values in my form using redux-form and serverside validation?

Question

I'm using redux-form with a login form component in ReactJS. But when I pass values to my form and I click on the submit button the values returned by the console.log are empty, and I don't know how to debug that. Here's my form component

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link, withRouter } from 'react-router-dom';
import {reduxForm, Field} from 'redux-form';
import classnames from 'classnames'

// Actions
import {signin} from '../../actions/auth';

// Bootstrap
import { Grid, Row, Col, Image } from 'react-bootstrap';

// Includes
import '../../assets/css/users/signin.min.css';
import logo from '../../assets/images/datazonia_icone.png';

const renderField = ({input, label, type, forgotPassword=false, meta: {touched, error}}) =>(
    <div className="form-group">
        <label>{label}</label>
        <input {...input} type={type}/>
        {forgotPassword &&
        <span className="forgot-pw">
            <Link to="/users/password/reset">mot de passe oublié ?</Link>
        </span>}
          {touched &&
          error &&
          <span className="help-block">
              {error}
          </span>}
    </div>);

let SigninForm = (props) => {
    const {handleSubmit, submitting, error } = props;
    return (
        <form onSubmit={handleSubmit}>
            <Field
                name="login"
                component={renderField}
                type='text'
                input={{
                    className: "form-control"
                }}
                label="Email ou nom d'utilisateur"
            />
            <Field
                name="password"
                component={renderField}
                type="password"
                input={{
                    className: "form-control"
                }}
                label='Mot de passe'
                forgotPassword
            />
            {error &&
            <strong>
                {error}
            </strong>}
          <button disabled={submitting} type="submit" className="btn btn-block btn-datazonia">Connexion</button>
        </form>
    );
};

SigninForm = reduxForm({
    form: 'signin'
})(SigninForm);

class UserSignin extends Component {

  onSubmit = (values) => {
      console.log(values);
      return this.props.signin(values, this.props.history, 'users');
  };

  render() {
    return (
      <div className="UserSignin">
        <Grid>
          <Row className="show-grid bloc-sign">
            <Col sm={4} smOffset={4} xs={12} className="text-center title">
              <Link to="/">
                <Image src={logo} responsive className="center-block"/>
              </Link>
              <h3>Se connecter</h3>
            </Col>
            <Col sm={4} smOffset={4} xs={12}>
              <div className="signin-form">
                <SigninForm onSubmit={this.onSubmit}/>
              </div>
            </Col>


          </Row>
        </Grid>
      </div>
    );
  }
}
UserSignin = connect(null, {signin})(withRouter(UserSignin));
export default UserSignin;

My values are empty when i click on the submit button, how can i get it to work ?

(And sorry for my English, I'm French)

Answer 1

OK, I've resolved this issue. the problem was input={{ className: "form-control" }} overrides the default behavior of redux-form