1

我在redux-form-validators使用文档建议的代码时难以覆盖默认错误消息：

Object.assign(Validators.messages, {
    required: "This is a required field"
})

这给出了一个错误

验证器未定义

问题：这个Validators对象是什么，我们应该在哪里/如何定义/使用它，以便我们可以正确地覆盖默认消息？

/containers/Animals/Animals.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
import { required } from 'redux-form-validators';
import { renderTextField } from './FormHelpers';

class AnimalForm extends Component {
    constructor(props) {
        super(props);
        Object.assign(Validators.messages, {                // ERROR OCCURS HERE
            required: "This is a required field"
        })
    }

    render() {
        return (
            <div>
                <form>                     
                        <Field
                            label="Longitude"
                            name="location.coordinates[0]"
                            component={renderTextField}
                            type="text"
                            validate={[required()]}
                        />  
                </form>
            </div>
        )
    }

}

export default connect(mapStateToProps)(reduxForm({
    form: 'animal'
})(AnimalForm))
4

3 回答 3

2

我建议您使用 的内置功能进行验证，redux-form以便您可以更好地控制您的代码库。最好将表格分开而不是将它们放在感觉有点奇怪的容器中。我通常会执行以下操作：

我为表单创建了一个无状态组件，因为我们不打算更改该组件内的状态。

表格/animal.form.js

import React from 'react';
import { connect } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
import { renderTextField } from './FormHelpers';
import validate from './validate';
import submit from './submit';

let AnimalForm = (props) => {

  const {
    handleSubmit, submitting,
  } = props;

  return (
    <div>
      <form onSubmit={handleSubmit}>                    
        <Field
          label="Longitude"
          name="longitude"
          component={renderTextField}
          type="text"
        />
        <button type="submit" disabled={submitting}>Submit</button>
      </form>
    </div>
  );
};

AnimalForm = reduxForm({
  form: 'animal',
  onSubmit: submit,
  validate,
})(AnimalForm);

export default AnimalForm;

当您尝试使用“提交”按钮提交表单时，将调用 validate 函数validate.js。在此函数中进行所有验证。您甚至可以使用正则表达式进行验证。

表单/验证.js

const validate = (values) => {
  const errors = {};
  if (!values.longitude) {
    errors.longitude = 'This is a required field';
  }
  return errors;
};

export default validate;

一旦没有验证错误，submit.js就会调用提交函数。

表单/submit.js

function submit(values, dispatch, props) {

  // PERFORM YOUR OPERATIONS HERE AND DISPATCH ACTIONS

  const body = {
    longitude: values.longitude,
  };

  dispatch(createAnimal(body));

}

export default submit;

希望这可以帮助。干杯。

于 2018-10-07T19:57:23.630 回答
0

如果您想全局覆盖消息，请Object.assign在您index.js或某个全局位置使用该方法 - 在组件内执行此操作是一个非常糟糕的主意。要在全球范围内这样做：

import Validators from 'redux-form-validators'

Object.assign(Validators.messages, {
    required: "This is a required field"
})

// or 

Object.assign(Validators.messages, {
  required: {    
    defaultMessage: "This is a required field"
  }
})

查看您的示例代码，如果您只想为组件覆盖它，那么在本地执行会更好：

<Field
    label="Longitude"
    name="location.coordinates[0]"
    component={renderTextField}
    type="text"
    validate={[required({msg: "This is a required field"})]}
/>
于 2018-10-06T21:07:49.583 回答
0

尝试将验证器添加到您的导入中

import { Validators, required } from 'redux-form-validators'
于 2018-10-04T21:51:56.387 回答