使用 redux-form 验证检索错误

Question

这是我在 Whosebug 上的第一个问题 :) 我搜索了一会儿，但我没能解决我的问题...我请求你的帮助 ;)

这是我的组件形式：

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;
};

最后，我声明我的 reducers（应用程序根目录中的应用程序容器组件）：

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

我遇到的问题是我无法在我的 renderField 函数中填充我的 field.error 信息...我不明白，因为调用了验证函数，它填充了错误数组，其中包含问题。似乎我的表单组件在提交时没有刷新，即使我觉得我正确地声明了减速器......即使我在 the redux-form documentation 中花了很长时间，我也无法完成这项工作。 .

知道问题出在哪里吗？我在网上检查了示例，发现了一些示例，但没有找到我使用的 redux-form 提出的 Field 组件...:)

非常感谢您的帮助！

ps：我在 javascript 和编码方面是个新手，所以我可能犯了一个初学者错误...这对您的分析很有帮助 ;)

Answer 1

验证函数的名字应该是'validate'，所以不能用es6语法，改成这样：

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

使用 redux-form 验证检索错误

Retrieve errors with redux-form validation

javascript

forms

reactjs

redux

redux-form