国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Un projet sur lequel je travaillais récemment utilisait Antd et reac-redux, et il y avait une mention de formulaire dedans. Mon exigence est d'effectuer une validation frontale lorsque l'utilisateur entre. L'attribut getFieldDecorator；當用戶提交表單之后，將后端返回的錯誤信息對應(yīng)到表單中，這里使用了Antd提供的自定義校驗，即FormItem的help和validateStatus fourni par Antd est utilisé ici.

Mais j'ai découvert que lorsque j'utilise la vérification personnalisée, getFieldDecorator就不在起作用了。那如果想使用getFieldDecoratorverification et que je souhaite utiliser la vérification personnalisée lorsque le backend renvoie des données, comment dois-je gérer cela??

Merci à tous d'avance.

Extrait de code ci-joint?:

Composants de l'interface utilisateur

    submitLogin = (e) => {
        e.preventDefault();
        // 前端驗證
        this.props.form.validateFields((err, values) => {
            if (!err) {
                // 前端驗證無誤，向后端提交
                this.props.submitLoginForm(values);
            }
        });
    };
    render() {
        const { getFieldDecorator } = this.props.form;
        // 后端返回結(jié)果
        const access = this.props.loginState.results;
        const rulesGenerate = {
            email: getFieldDecorator('email', {
                        rules: [
                            { required: true, message: '請?zhí)顚戉]箱' },
                            { type: 'email', message: '郵箱格式不對' },
                        ]
                    })
        };
        // 服務(wù)器返回的數(shù)據(jù)是否有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>
       );

Composant conteneur

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

// 派發(fā)事件
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))
        );
    }
}

Réducteur

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;
    }
}