Question

这是我关于stackOverflow的第一个问题:)我搜索了一段时间，但我无法解决我的问题...我正在声称你的帮助;）

这是我的组件形式：

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

最后我宣布我的Redurs（应用程序根目录中的app容器组件）：

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

我遇到的问题是我没有设法在我的renderField函数中填充我的field.error信息......我不明白因为调用了validate函数来填充包含问题的errors数组。看来我的表单组件在提交时没有刷新，即使我觉得我已经正确地声明了reducer ...即使我在the redux-form documentation花了很长时间，我仍然无法完成这项工作。

知道什么是问题？我在网上检查了一些例子，但是我找到了一些但没有使用由redux-form提出的Field组件，我使用了......：）

非常感谢你的帮助！

ps：我是一个关于javascript和编码的新手，所以我可能做了一个初学者错误......这对你的分析很有帮助;）

Answer 1

验证功能的名称应该是＆＃39;验证＆＃39;，因此您无法使用es6语法，只需将其更改为：

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

使用redux-form验证检索错误

1 个答案: