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="/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

好的，我已经解决了这个问题。问题是输入= {{ className：＆＃34; form-control＆＃34; }} 覆盖redux-form的默认行为

如何使用redux-form和serverside验证处理表单中提交的值？

1 个答案: