使用React-intl进行Redux形式的字段级验证和错误转换

Question

使用redux-form,我尝试使用i18n进行字段级验证.我正在使用react-intl(https://github.com/yahoo/react-intl),所以我尝试了这个:

<Field name="Label" component={renderField} validate={[required(this.props.intl)]}

具有验证功能:

const required = (intl) => (value) => {return value ? undefined : intl.formatMessage({id:"Required"})};

问题:当我的字段标签出现错误时,如果我更改语言,我的字段状态将丢失,我的错误消息将消失.

我认为验证道具的价值不应该在渲染之间改变,因为它会导致字段重新注册.解决办法是什么 ？

如何在Field-Level Validation中正确地将react-intl集成到验证消息中？可能吗 ？

Answer 1

你不能将验证函数包装到另一个函数中,每次渲染表单时它都会构造一个新函数,这会导致字段重新渲染(因为this.props.validate !== nextProps.validate).

但是您可以创建Field渲染组件并将本地化验证消息作为道具传递给它.这是一个例子:

<form>
    <Field
        name='Label'
        component={RenderField} //here you pass field render component
        validate={required}
        validationMessage={this.props.intl.formatMessage({id: 'Required'})}
    />
    {/*rest of the form*/}
</form>

RenderField组件:

const RenderField = (props) => {
    const {validationMessage, meta: {touched, error}} = props;

    return <div>
        <input
            {...props}
        />
        {touched &&
        (error &&
            <div className='error'>
                {validationMessage}
            </div>)}
    </div>;
};

export default RenderField;

或者,如果您需要具有不同的验证消息取决于验证错误,您可以创建将返回formatMessageId并传递intl到的特定验证函数RenderField:

const RenderField = (props) => {
    const {intl, meta: {touched, error}} = props;

    return <div>
        <input
            {...props}
        />
        {touched &&
        (error &&
            <div className='error'>
                {intl.formatMessage(error)}
            </div>)}
    </div>;
};