如何以redux形式访问模糊的验证结果

Question

如果验证失败，我想停止任何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是一个班级

Answer 1

使用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);