登錄組件在console.log中未定義

我在ReactJS中使用一個Redux Store創建了一個auth系統。在執行Signin Class時，它在控制檯中顯示未定義，未定義。我在下面包含了signin.js文件和reducer文件。登錄組件在console.log中未定義

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

來源

2016-12-27 Rishi Raj

'handleFormSubmit'傳遞給一個[**事件對象**]（https://facebook.github.io/react/docs/events.html）。事件對象不具有「email」和「password」屬性。所以你的輸出是預期的。如果您想獲取輸入字段的值，請使用[受控組件]（https://facebook.github.io/react/docs/forms.html）。 –

但是每天學習都會有所反應： - 上面你正在做的事情是，在之前版本的react和redux表單中使用新版本的react 15和above以及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;

rewitten它的狀態，您可以從文檔http://redux-form.com/6.4.0/docs/GettingStarted.md/ 看看這個視頻由創建者的更多信息形式爲Erik Rasmussen。他解釋得比我更好https://www.youtube.com/watch?v=eDTi7lYR1VU

來源

2016-12-29 11:48:05

登錄組件在console.log中未定義

回答

相關問題