Javascript 登录组件在console.log上提供未定义的

我正在用ReactJS制作一个身份验证系统，并使用Redux存储。当我实现Signin类时，它在控制台中显示未定义，未定义。我在下面包含了signin.js文件和reducer文件

src/components/auth/signin.js

import React, { Component } from 'react';
import { reduxForm } from 'redux-form';/*
import * as actions from '../../actions';*/

class Signin extends Component {


    handleFormSubmit({ email, password }){
            /*actions.signinUser({ email, password });*/
            console.log(email,password);
        }

    render() {
        // code
        const { handleSubmit, fields: { email, password }} = this.props;
        return (
        <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
            <fieldset className="form-group">
                <label>Email:</label>
                <input {...email} className="form-control" />
            </fieldset>
            <fieldset className="form-group">
                <label>Password:</label>
                <input {...password} className="form-control" />
            </fieldset>
            <button action="submit" className="btn btn-primary">Sign In</button>

        </form>
    );
    }

    // methods
}

export default reduxForm({
    form: 'signin',
    fields: ['email',  'password']
})(Signin);

import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';
const rootReducer = combineReducers({
    form
});

export default rootReducer;

import React, {PropTypes} from 'react';
import { reduxForm, Field } from 'redux-form';

const handleFormSubmit = values => console.log({ data: values });

let Signin = props => (
  <form onSubmit={props.handleSubmit(handleFormSubmit)}>
    <Field name="email" component="input"
       type="test" placeholder="Email" />
    <Field name="password" component="input"
       type="password" placeholder="Password" />
    <button type="submit">Sign in</button>
  </form>
);

Signin.propTypes = {
  handleSubmit: PropTypes.func.isRequired
};

Signin = reduxForm({form: 'Signin'})(Signin);

export default Signin;

控制台

undefined, undefined

---

一个每天都在学习的人：- 您在上面所做的工作用于早期版本的react和redux表单，以及新版本的react 15和更高版本以及redux表单6和更高版本。您需要将每个值输入设置为受控输入，以避免得到未定义的结果。 因为您的表单没有状态，所以我使用函数式无状态组件语法重新连接了它

signin.js

import React, { Component } from 'react';
import { reduxForm } from 'redux-form';/*
import * as actions from '../../actions';*/

class Signin extends Component {


    handleFormSubmit({ email, password }){
            /*actions.signinUser({ email, password });*/
            console.log(email,password);
        }

    render() {
        // code
        const { handleSubmit, fields: { email, password }} = this.props;
        return (
        <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>
            <fieldset className="form-group">
                <label>Email:</label>
                <input {...email} className="form-control" />
            </fieldset>
            <fieldset className="form-group">
                <label>Password:</label>
                <input {...password} className="form-control" />
            </fieldset>
            <button action="submit" className="btn btn-primary">Sign In</button>

        </form>
    );
    }

    // methods
}

export default reduxForm({
    form: 'signin',
    fields: ['email',  'password']
})(Signin);

import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';
const rootReducer = combineReducers({
    form
});

export default rootReducer;

import React, {PropTypes} from 'react';
import { reduxForm, Field } from 'redux-form';

const handleFormSubmit = values => console.log({ data: values });

let Signin = props => (
  <form onSubmit={props.handleSubmit(handleFormSubmit)}>
    <Field name="email" component="input"
       type="test" placeholder="Email" />
    <Field name="password" component="input"
       type="password" placeholder="Password" />
    <button type="submit">Sign in</button>
  </form>
);

Signin.propTypes = {
  handleSubmit: PropTypes.func.isRequired
};

Signin = reduxForm({form: 'Signin'})(Signin);

export default Signin;

import React，{PropTypes}来自'React'；
从'redux form'导入{reduxForm，Field}；
const handleFormSubmit=values=>console.log（{data:values}）；
让签名=道具=>(
登录
);
签名类型={
handleSubmit:PropTypes.func.isRequired
};
Signin=reduxForm（{form:'Signin'}）（Signin）；
导出默认签名；

您可以从文档中获得更多信息

---

查看这段由redux form Erik Rasmussen的创建者制作的视频。他解释得比我好

handleFormSubmit

通过了考试。事件对象没有

电子邮件

和

密码

属性。因此，您得到的输出是预期的。如果要获取输入字段的值，请使用。