как получить доступ к результату проверки на размытие в редукционной форме - PullRequest
Новая
       6

как получить доступ к результату проверки на размытие в редукционной форме

0 голосов
/ 30 августа 2018

Я хочу остановить любую функцию onblur, если проверка не удалась. я не уверен, как это сделать

вот поле 

<Field
                                    label="Demand Ref"
                                    name="demand_ref"
                                    component={this.renderTextField}
                                    type="text"
                                    onBlur={e => this.onAfterSaveCell(e, 'demand_ref')}
                                    onFocus={e => this.onBeforeSaveCell(e, 'demand_ref')}
                                    validate={[validateDemandRef]}
                                    maxlength="15"
                                />

если validate не удается, я не хочу, чтобы что-либо в onBlur работало. как я могу это сделать?

UPDATE

Если я использую validate={[validateDemandRef]}, что мне передать в ...some validation

ОБНОВЛЕНИЕ 2

как это будет выглядеть, если это класс const MyComponent = ({ handleSubmit, valid }) => (. MyComponent это класс

1 Ответ

0 голосов
/ 31 августа 2018

Используйте селекторы isValid или isInvalid (https://redux -form.com / 7.4.2 / docs / api / selectors.md / ) 

import React from 'react';
import { compose } from 'redux';
import { reduxForm, isValid } from 'redux-form';

const MyComponent = ({ handleSubmit, valid }) => (
  <form onSubmit={handleSubmit}>
    <Field
      label="Demand Ref"
      name="demand_ref"
      component={this.renderTextField}
      type="text"
      onBlur={valid && e => this.onAfterSaveCell(e, 'demand_ref')}
      onFocus={e => this.onBeforeSaveCell(e, 'demand_ref')}
      validate={[validateDemandRef]}
      maxlength="15"
    />
    <button type="submit">Submit</button>
  </form>
);

const FORM_NAME = 'my-form';

export default compose(
  reduxForm({
    form: FORM_NAME,
  }),
  connect(state => ({
    valid: isValid(FORM_NAME)(state),  // also there is an isInvalid selector
  })),
)(MyComponent);

Для реализации компонента с состоянием 

import React, { PureComponent } from 'react';
import { compose } from 'redux';
import { reduxForm, isValid } from 'redux-form';

class MyComponent extends PureComponent {
  render() {
    const { handleSubmit, valid } = this.props;

    return (
      <form onSubmit={handleSubmit}>
        <Field
          label="Demand Ref"
          name="demand_ref"
          component={this.renderTextField}
          type="text"
          onBlur={valid && e => this.onAfterSaveCell(e, 'demand_ref')}
          onFocus={e => this.onBeforeSaveCell(e, 'demand_ref')}
          validate={[validateDemandRef]}
          maxlength="15"
        />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

const FORM_NAME = 'my-form';

export default compose(
  reduxForm({
    form: FORM_NAME,
  }),
  connect(state => ({
    valid: isValid(FORM_NAME)(state),  // also there is an isInvalid selector
  })),
)(MyComponent);
...