如何将redux与antd表单验证集成

Posted 2023-02-17

我正在使用react-js，antd和redux验证一个电子邮件字段，我的问题是为什么在我集成redux（created-form.js）时加载图标在输入中消失但是当我删除redux集成时，加载图标工作正常，我在这里错过了什么，或做了些不对的事情？

基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>

...

创建-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;

答案

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

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