サインインコンポーネントはconsole.logでundefinedを返します

Question

私はReactJSで認証システムを作っており、Reduxストアを使っています。私のSigninクラスを実装している間は、コンソールにが定義されていません。が未定義です。私はsignin.jsファイルと以下のレデューサーファイルを含んでいます。

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以上および還元型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; 

を使用して、それをrewittenている何の状態を持っていないので、あなたは、ドキュメントhttp://redux-form.com/6.4.0/docs/GettingStarted.md/ チェックアウトの作成者によってこのビデオからのより多くの情報を得ることができます還元型Erik Rasmussen。彼はそれ以上に説明しますhttps://www.youtube.com/watch?v=eDTi7lYR1VU