在redux-form-validators中覆盖默认消息

Posted 2021-05-05

我无法使用文档建议的代码覆盖redux-form-validators中的默认错误消息：

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

这给出了一个错误

验证器未定义

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

/containers/animals/animals.就是

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))

答案

我建议你使用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.js调用validate函数。在此功能中进行所有验证。您甚至可以使用正则表达式进行验证。

表格/ validate.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;

希望这可以帮助。干杯。

另一答案

尝试将Validators添加到导入中

import { Validators, required } from 'redux-form-validators'

另一答案

如果你想全局覆盖消息，请在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"})]}
/>