Sign In Component дает undefined на console.log

Я создаю систему auth в ReactJS и использую Redux Store. Пока я реализую свой класс Signin, он показывает undefined, undefined в консоли. Я включил файл signin.js и файл редуктора ниже.Sign In Component дает undefined на 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). –

a noob, но learnig reactjs каждый день: - То, что вы делаете выше, раньше использовалось для предыдущих версий реакционной и редукционной формы с новыми версиями реакции 15 и выше и с уменьшением формы 6 и выше. Вам нужно будет сделать каждое значение введенным управляемым входом, чтобы не получить неопределенный результат. Поскольку ваша форма не имеет состояния я rewitten его с помощью функционального компонента без сохранения синтаксиса

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/ Проверь это видео создателя редукс-форма Эрик Расмуссен. Он объясняет это лучше, чем я могу. https://www.youtube.com/watch?v=eDTi7lYR1VU

источник

2016-12-29 11:48:05

Sign In Component дает undefined на console.log

ответ

Смежные вопросы