覆盖 redux-form-validator 中的默认消息

Question

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

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

这给出了一个错误

未定义验证器

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

/容器/动物/动物.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调用验证函数。在此函数中执行所有验证。您甚至可以使用正则表达式进行验证。

表单/验证.js

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

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

表单/提交.js

function submit(values, dispatch, props) {
// PERFORM YOUR OPERATIONS HERE AND DISPATCH ACTIONS
const body = {
longitude: values.longitude,
};
dispatch(createAnimal(body));
}
export default submit;

希望这有帮助。干杯。

Answer 2

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

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"})]}
/> 

Answer 3

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

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