javascript - Antd form 和 redux集成，如何同时处理前后端验证？

问题描述

问 题

最近在做的一个项目使用了Antd和reac-redux，其中有一处表单提。我的需求是，当用户输入时进行前端验证，这里使用了Antd提供的getFieldDecorator；当用户提交表单之后，将后端返回的错误信息对应到表单中，这里使用了Antd提供的自定义校验，即FormItem的help和validateStatus属性。

但是我发现当使用自定义校验时，getFieldDecorator就不在起作用了。那如果想使用getFieldDecorator校验，又想在后端返回数据时使用自定义校验，该如何处理呢？

提前谢谢各位。

附代码片段：

UI组件

    submitLogin = (e) => {
        e.preventDefault();
        // 前端验证
        this.props.form.validateFields((err, values) => {
            if (!err) {
                // 前端验证无误，向后端提交
                this.props.submitLoginForm(values);
            }
        });
    };
    render() {
        const { getFieldDecorator } = this.props.form;
        // 后端返回结果
        const access = this.props.loginState.results;
        const rulesGenerate = {
            email: getFieldDecorator('email', {
                        rules: [
                            { required: true, message: '请填写邮箱' },
                            { type: 'email', message: '邮箱格式不对' },
                        ]
                    })
        };
        // 服务器返回的数据是否有error
        const errors = access.error?access.error:false;
        return (
            <Form onSubmit={this.submitLogin} className="login-form">
                <FormItem
                    className="login-form__item"
                    validateStatus={errors&&errors.email?'error':''}
                    help={errors&&errors.email?errors.email:''}
                >
                    {rulesGenerate.email(
                        <Input addonBefore={<Icon fontSize="20" type="user" />} placeholder="用户名 / ID / 手机号" />
                    )}
                </FormItem>
            </Form>
       );

容器组件

// 传送state到UI组件的props
const mapStateToProps = (state) => {
    return {
        loginState: state.loginReducer
    }
}

// 派发事件
const mapDispatchToProps = (dispatch) => {
    return {
        submitLoginForm: (values) => {
            dispatch(loginProcessing(values))
        }
    }
}

// 连接UI组件
const ShowForm = connect( mapStateToProps,mapDispatchToProps )(Login)

Action

// start fetching data
export const LOGIN_STARTING = 'LOGIN_STARTING'
function loginStarting(isLogging) {
    return {
        type: LOGIN_STARTING,
        isLogging
    }
}
// fetched data successfully
export const LOGIN_SUCCEEDED = 'LOGIN_SUCCEEDED'
function loginSucceeded(isLogging,results,fields) {
    return {
        type: LOGIN_SUCCEEDED,
        isLogging,
        results,
        fields
    }
}
// meet some errors after fetching
export const LOGIN_FAILED = 'LOGIN_FAILED'
function loginFailed(isLogging,results) {
    return {
        type: LOGIN_FAILED,
        isLogging,
        results
    }
}

export function loginProcessing(values) {
    return function (dispatch, getState) {
        let loginData = new FormData();
        loginData.append('email', values.email);

        dispatch(loginStarting(true));
        return fetch(`api/login`,{
            method: 'POST',
            body: loginData
        })
        .then(response => response.json())
        .then(response =>{
            return dispatch(loginSucceeded(false,response,values))
        }).catch(error =>
            dispatch(loginFailed(false,error))
        );
    }
}

Reducer

import
{
    LOGIN_STARTING,
    LOGIN_SUCCEEDED,
    LOGIN_FAILED
} from '../action.js';

const initialState = {
  isLogging: false,
  results: {},
  fields: {}
};

export default function formReducer(state = initialState, action) {
    switch (action.type) {
        case LOGIN_STARTING:
              return Object.assign({}, state, {
                isLogging: action.isLogging
              })
        case LOGIN_SUCCEEDED:
              return Object.assign({}, state, {
                isLogging: action.isLogging,
                   results: action.results,
                   fields: action.fields
            })
        case LOGIN_FAILED:
              return Object.assign({}, state, {
                isLogging: action.isLogging,
                   results: action.results
            })
        default:
              return state;
    }
}

解决方案

使用this.props.form的setFields方法，官方示例：server-validate

这篇关于javascript - Antd form 和 redux集成，如何同时处理前后端验证？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！