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

Question

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

我尝试过手动调度“触摸”手段。动作，并尝试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。

更改

with

到

onBlur={this.fetchAddressesValid}