如何使用redux-form和serverside驗證在我的表單中處理提交的值？

Question

我在ReactJS中對登錄表單組件使用了redux-form。 但是，當我將值傳遞給我的表單，並且我單擊提交按鈕時，console.log返回的值爲空，我不知道如何調試它。 這裏是我的表單組件

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="https://stackoverflow.com/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; 

我的價值觀是空的，當我提交按鈕點擊，我怎麼能得到它的工作？

（以及我的英語很抱歉，我是法國人）

Answer 1

OK，我已經解決了這個問題。 問題是 輸入= {{ 的className：「形式控制」 }} 覆蓋Redux的形式的默認行爲