Как интегрировать избыточность с проверкой формы antd - PullRequest
Новая
       10

Как интегрировать избыточность с проверкой формы antd

1 голос
/ 05 апреля 2019

Я проверяю поле электронной почты с помощью response-js, antd и redux, моя проблема в том, почему значок загрузки исчезает во входе, когда я интегрировал redux (созданный-form.js), но когда я удаляю интеграцию избыточного числа,значок загрузки работает нормально, я что-то здесь упускаю или что-то делаю не так?

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>

...

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

1 Ответ

0 голосов
/ 05 апреля 2019

Я нашел проблему, я забыл добавить ...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

...