Question

我正在使用ReactJS制作一个auth系统并使用Redux Store。当我实现我的Signin类时，它在控制台中显示 undefined，undefined 。我在下面包含了signin.js文件和reducer文件。

的src /组件/ 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);

的src /减速器/ index.js

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

export default rootReducer;

控制台

undefined, undefined

Answer 1

一个菜鸟但每天都学习反应： - 您上面所做的事情曾经在反应和还原形式的早期版本中使用新版本的反应15及以上版本以及redux-form 6及更高版本。您需要使每个值输入一个受控输入，以免得到未定义的结果。由于您的表单没有状态，我使用功能无状态组件语法重新编写它

<强> signin.js

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;

您可以从文档http://redux-form.com/6.4.0/docs/GettingStarted.md/获取更多信息看看redux-form Erik Rasmussen的创建者观看了这个视频。他解释得比我https://www.youtube.com/watch?v=eDTi7lYR1VU

更好

登录组件在console.log上给出undefined

1 个答案: