javascript - 覆盖 redux-form-validators 中的默认消息

Question

我很难使用文档建议的代码覆盖 redux-form-validators 中的默认错误消息:

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

这会产生错误

Validators is not defined

问题:这个 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))

Answer 1

我建议您使用 redux-form 的内置功能进行验证，以便您更好地控制代码库。最好将表单分开，而不是将它们放入容器中，这感觉有点奇怪。我通常会做类似以下的事情:

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

forms/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.js 调用验证函数。在此函数内进行所有验证。您甚至可以使用正则表达式来验证。

forms/validate.js

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

export default validate;

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

forms/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;

希望这有帮助。干杯。