Javascript 覆盖redux表单验证程序中的默认消息

我很难使用文档建议的代码覆盖

redux表单验证程序中的默认错误消息

：

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

这是一个错误

没有定义验证器

问题：这个

验证器

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

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

import React，{Component}来自'React'；
从'react redux'导入{connect}；
从'redux form'导入{reduxForm，Field}；
从“redux表单验证程序”导入{required}；
从“/FormHelpers”导入{renderTextField}；
类AnimalForm扩展组件{
建造师（道具）{
超级（道具）；
assign（Validators.messages），此处发生{//错误
必填：“这是必填字段”
})
}
render（）{
返回(
)
}
}
导出默认连接（MapStateTops）（reduxForm({
表格：“动物”
})（动物型）

尝试将验证程序添加到导入中

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

---

如果要全局覆盖消息，请在

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

---

我建议您使用

redux form

的内置功能进行验证，这样您就可以更好地控制代码库。最好将表单分开，而不是将它们放在感觉有点奇怪的容器中。我通常会这样做：

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

forms/animal.form.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))

从“React”导入React；
从'react redux'导入{connect}；
从'redux form'导入{reduxForm，Field}；
从“/FormHelpers”导入{renderTextField}；
从“/validate”导入验证；
从“/submit”导入提交；
让动物形态=（道具）=>{
常数{
提交，提交，
}=道具；
返回(
提交
);
};
动物型({
表格：'动物'，
提交：提交，
验证
})（动物形式）；
导出默认动画形式；

当您尝试使用“提交”按钮提交表单时，将从

validate.js

调用validate函数。在此函数中执行所有验证。您甚至可以使用regex进行验证

表单/validate.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))

const validate=（值）=>{
常量错误={}；
如果（！values.longitude）{
errors.longitude='这是必填字段'；
}
返回错误；
};
导出默认验证；

一旦没有验证错误，就会调用

submit.js

中的submit函数

表单/submit.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))

函数提交（值、分派、道具）{
//在此处执行操作并分派操作
常数体={
经度：values.longitude，
};
调度（动物（身体））；
}
导出默认提交；

希望这有帮助。干杯