Получение ошибок с проверкой перевождь-формы

Question

Это мой первый вопрос на StackOverflow :) Я искал whilel, но мне не удается решить мою проблему ... Я претендующий на помощь тогда;)

Вот мой компонент формы:

import React from 'react'; 
import styles from './subscribe.css'; 
import { Field, reduxForm, propTypes } from 'redux-form'; 
import { validateSubscribeForm, renderBasicField, renderEmailField } from '../Shared/formUtils'; 

class SubscribeForm extends React.Component { 

    render() { 
    const { handleSubmit } = this.props; 
    return (
     <div className={styles.container}> 
     <div className={styles.form}> 
      <form onSubmit={handleSubmit(validateSubscribeForm)}> 
      <div> 
       <Field name='firstname' type='text' label='Prénom' component={renderBasicField} /> 
      </div> 
      <div> 
       <Field name='lastname' type='text' label='Nom' component={renderBasicField} /> 
      </div> 
      <div> 
       <Field name='email' type='email' label='Email' component={renderEmailField} /> 
      </div> 
      <div> 
       <button className='btn btn-info' type='submit'>Submit</button> 
      </div> 
      </form> 
     </div> 
     </div> 
    ); 
    } 
} 

SubscribeForm.propTypes = { 
    fields: React.PropTypes.shape({ 
    email: React.PropTypes.string, 
    firstname: React.PropTypes.string, 
    lastname: React.PropTypes.string 
    }), 
    handleSubmit: propTypes.handleSubmit 
}; 

export default reduxForm({ 
    form: 'subscribe', 
    validateSubscribeForm 
})(SubscribeForm); 

И то функции, которые я использую в этом компоненте:

import React from 'react'; 

export const renderBasicField = (field) => { 
    console.log('field ', field); 
    return (<div className='input-row form-group has-success has-feedback'> 
    <input {...field.input} className='form-control' type='text' placeholder={field.label} /> 
    {field.meta.touched && field.meta.error && 
    <span className='error'>{field.meta.error}</span>} 
    </div>); 
}; 

export const renderEmailField = (field) => (
    <div className='input-row form-group has-success has-feedback'> 
    <div className='input-group'> 
     <span className='input-group-addon'>@</span> 
     <input {...field.input} type='text' className='form-control' placeholder={field.label} id='inputGroupSuccess1' aria-describedby='inputGroupSuccess1Status' /> 
     {field.meta.touched && field.meta.error && 
     <span className='error'>{field.meta.error}</span>} 
    </div> 
    </div> 
); 

export const validateSubscribeForm = values => { 
    const errors = {}; 
    console.log('values : ', values); 
    if (!values.firstname) errors.firstname = 'Un nom est requis'; 
    if (!values.lastname) errors.lastname = 'Un nom est requis'; 
    if (!values.email) errors.email = 'Un email est requis'; 
    else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) { 
    errors.email = 'Adresse email invalide'; 
    } 
    console.log('Errors: ', errors); 
    return errors; 
}; 

И, наконец, где я объявляю мои восстановителей (приложение контейнер компонентов в корне приложения):

const rootReducer = combineReducers({ 
    userConnection: connection, 
    tennisSearch: reducer, 
    subscribe: subscribeReducer, 
    form: formReducer, 
    routing: routerReducer 
}); 

Проблема у меня есть, что мне не удается получить мою field.error информации заселена в моих функциях renderField ... Я не понимаю, потому что функция Validate вызывается которая заполняет массив, содержащий ошибки Проблемы. Кажется, что мой компонент формы не обновляется, даже если у меня возникает ощущение, что я правильно объявил редуктор ... Мне не удается получить эту работу, даже если я провел много времени в the redux-form documentation ...

Любая идея, в чем проблема? Я проверил примеры в Интернете, и я нашел их, но не с компонентом Field, предложенным сокращаемой формой, которую я использую ... :)

Большое спасибо за вашу помощь!

пса: Я довольно новичок на яваскрипте и кодирование, так что я мог бы сделать начинающую ошибку ... это может быть полезно для анализа;)

Answer 1

Имя функции проверки должно быть «Validate», поэтому вы не можете использовать синтаксис es6, просто измените его на это:

export default reduxForm({ 
    form: 'subscribe', 
    validate: validateSubscribeForm 
})(SubscribeForm);