redux 与 antd 表单验证如何集成答案

【问题标题】：How to integrate redux with antd form validationredux 与 antd 表单验证如何集成
【发布时间】：2019-04-05 07:18:48
【问题描述】：

我正在使用 react-js、antd 和 redux 验证电子邮件字段，我的问题是为什么当我集成 redux(created-form.js) 但删除 redux 集成时加载图标在输入中消失了，加载图标工作正常，是我在这里遗漏了什么，还是做错了什么？

base-form.js

 ...

 // Constructor

 constructor() {
   super();

   this._validateEmail = _.debounce(this._validateEmail, 1000);
 }


 // Private method

 _validateEmail = (rule, email, callback) => {
   const url = 'http://localhost:8000/api/user/isExist';

   axios
     .post(url, { email })
     .then(res => {
       if (res.data.isExist) {
         callback('Email is already exist');
       }

       callback();
     })
     .catch(res => console.log(res));
 };


 // Render

 <Form.Item hasFeedback>
    {getFieldDecorator('email', {
       rules: [...rules.email, { validator: this._validateEmail }]
    })(<Input placeholder="Email" />)}
 </Form.Item>

...

created-form.js

  import { Form } from 'antd';
  import AccSetupForm from './base-form';

  function mapPropsToFields(props) {
    return {
      email: Form.createFormField({
        value: props.email
      }),
      password: Form.createFormField({
        value: props.password
      }),
      confirm_pass: Form.createFormField({
        value: props.confirm_pass
      })
    };
  }

  function onFieldsChange(props, changedField) {
    const field = Object.values(changedField)[0];

    if (field !== undefined) {
      props.updateAccSetup({
        [field.name]: field.value
      });
    }
  }

  const CreatedForm = Form.create({ mapPropsToFields, onFieldsChange })(
    AccSetupForm
  );

  export default CreatedForm;

index.js

import { connect } from 'react-redux';
import { updateAccSetup } from '../actions';
import CreatedForm from './created-form';

function mapStateToProps(state) {
   return {
    email: state.getIn(['registration', 'user', 'email']),
    password: state.getIn(['registration', 'user', 'password']),
    confirm_pass: state.getIn(['registration', 'user', 'confirm_pass'])
  };
}

function mapDispatchToProps(dispatch) {
  return {
    updateAccSetup: userInfo => dispatch(updateAccSetup(userInfo))
  };
}

const StepOne = connect(
  mapStateToProps,
  mapDispatchToProps
)(CreatedForm);

export default StepOne;

【问题讨论】：

你在引入 redux 时做了哪些改变？
我删除了 created-form.js 中 onFieldsChange 中的整个代码

标签： reactjs react-redux antd

【解决方案1】：

我发现了问题，我忘了在form.createFormField里面添加...props.username

/* Antd Docu */

 mapPropsToFields(props) {
   return {
     username: Form.createFormField({
       ...props.username,
       value: props.username.value,
     }),
   };
},

这里有一些参考： https://github.com/ant-design/ant-design/issues/9561 https://ant.design/components/form/#components-form-demo-global-state

【讨论】：