カスタムonBlurを実装している間にRedux-form v6で同期検証を維持する方法は？

Question

いくつかのカスタムonBlur機能が必要なフィールドがありますが、私の機能を実装すると、通常の同期検証が機能しなくなります。 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イベントを使用しているときにエラー・メッセージが、最初の写真のようにポップアップ表示するために取得するにはどうすればよい

onBlur={this.fetchAddressesValid} 

関数？

Answer 1

完了したら、onBlurを委任してください。あなただけの例のように、 `Field`を設定するデフォルトの方法を使用していた場合

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

から

---

変更

onBlur={this.fetchAddressesValid}