如何在实现自定义 onBlur 时保持与 Redux-form v6 的同步验证？

Question

我有一个需要一些自定义 onBlur 功能的字段，但是当我实现我的功能时，正常的同步验证停止工作。当我使用 componentDidUpdate 控制台登录时，我仍然可以看到错误在 props.meta.error 内更新，但它实际上并没有显示错误。

我试过手动调度 'touch' 操作，并尝试使用 asyncValidation，但错误字段不会显示，除非我不使用 onBlur 道具。

有没有一种方法可以实现我自己的 onBlur 函数，同时仍然保留原始的错误验证内容？

这是我正在制作的组件：

class PostalCodeTextInput extends React.Component { // eslint-disable-line
  fetchAddressesValid = () => {
    // this.props.async();
    if (this.props.input.value.length > 5) {
      if (!this.props.meta.error) {
        this.props.fetchAddresses(this.props.input.value);
      }
    }
  }

  render() {
    const { helpText, input, label, type, meta: { touched, error } } = this.props;
    const classNames = classnames({
      'text-input': 'text-input',
      'form-group': 'form-group',
      invalid: touched && error,
    });
    return (
      <div className={classNames}>
        <label htmlFor={label}>{label}</label>
        <div>
          <input
            {...input}
            type={type}
            placeholder={label}
            onBlur={this.fetchAddressesValid} // *
          />
          {touched && error && <p className="warning">{error}</p>}
        </div>
        <small><em>{helpText}</em></small>
      </div>
    );
  }
}

这是应该应用的验证：

const validate = (values) => { // eslint-disable-line
  const errors = {};

  // NewAddressFields
  if (!values.get('postal_code')) {
    errors.postal_code = 'Required';
  } ...

这是我注释掉以下行时的样子：

// onBlur={this.fetchAddressesValid}

这就是我离开时的样子：

onBlur={this.fetchAddressesValid}

如何让错误消息像第一张图片那样弹出，同时仍然使用我自己的 onBlur 函数？

Answer 1

完成后委托 onBlur。

改变

onBlur={this.fetchAddressesValid}

到

onBlur={(e) => {
 this.fetchAddressesValid
 input.onBlur(e);
}}

如何在实现自定义 onBlur 时保持与 Redux-form v6 的同步验证？

How to keep sync validation with Redux-form v6 while implementing custom onBlur?

forms

validation

reactjs

redux

redux-form